Removing checkbox "window" in css

Question

I am trying to remove the actual check box field field and just make the text clickable. How can I do this using JS and css? I started using buttons, but I switched to checkboxes because the "state" of a window is easier to recognize than a button. But now, when I process the page with CSS for better formatting and layout, the boxes get in the way and I would prefer the text to be available without ads.

Answer 1

You can just hide it with CSS using display: none;

HTML

 <input type="checkbox" name="a" id="a" value="a" /><label for="a">asdf</label>​ 

CSS

 #a { display: none; /* visibility: hidden works too */ }​ 

See here the difference between visibility:hidden and display:none .

Demo

Answer 2

If you want to treat a piece of text as a button for the JS effect, you may need to wrap the text in the gap and assign the function that you are trying to run the onclick handler to this gap. If you use, say, jQuery, it might look like

 <script type="text/javascript"> // Your function: function doSomething() { alert('Hello!'); } // jQuery on-document-ready function, to assign the // function doSomething to the click handler of the span. $(document).ready(function() { $("span#myButtonText").click(function() { doSomething(); }); }); </script> <p><span id="myButtonText">Click Me for an Alert!</span></p>