remove checkbox border

gdemaria
gdemaria used Ask the Experts™
on
I use the statement below to make the boarder of input fields a little lighter and cleaner.  

But this statement seems to create a box around radio buttons and checkboxes; it looks like a border around a box.  

How can I get rid of the border for just checkboxes/radio buttons?

select, textarea, input {
      border: 1px solid #ccc;
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2007

Commented:
You can't remove the border they have in IE, as those aéle,´ments are "painted" by the OS, see e.g.
http://www.brainerror.net/scripts_js_checkbox.php
Top Expert 2007

Commented:
as those aéle,´ments
should read
as those elements  ;o)


Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Thanks for your posts.  It seems you're both thinking that I would like to make my checkbox borderless, sort-of like an invisible floating box.   Or perhaps change the color of the box.

That is not the case.  I am content with the border around the checkbox itself.  

The problem is that when I use that command, it creates a boarder AROUND my box.  So it looks like a box inside of a box.

 ------
 | [ ] |
 ------

 Nice drawing, eh?

 So the border property seems to treat INPUT type="text" differently than it treats INTPUT type="checkbox"    For Text boxes, it changes the color/properties of the line around the perimeter of the field.   But, for a Checkbox (and radio button), it doesn't effect the checkbox border, it ADDs a border AROUND the checkbox.  

 Try it.
Top Expert 2007

Commented:
I think we did understand you correctly...
For text boxes, changing the border will change the real border of the element itself, but for selects, checkboxes, it will add a border to the real border which CSS cannot replace, and so it indeed looks lik a border around a border...
Oh, ok.  I guess I misunderstood you!

So then, the question becomes this..

 Since I can elect to place the border around the checkbox or not, how do I specify to add the border to the text input tag, but NOT add the border to the checkbox?

 Is there a way to distinguish these two element types so that one gets the border and one does not?
Top Expert 2007

Commented:
Why don't you not simply assign different classes to checkboxes and text fields, e.g.

input.withBorder {
      border: 1px solid #ccc;
}

input.noBorder {
     /*some other stiles*/
}

<input type="text" class="withBorder">
<input type="checkbox" class="noBorder">
Top Expert 2007

Commented:
Why don't you not simply = Why don't you  simply...    :)
> Why don't you not simply assign different classes to checkboxes and text fields, e.g.

Well, using INPUT instead of a named class does not require me to classify every INPUT tag.   It just works throughout all pages.   I don't have to hunt down and modify my tags.

select, textarea, input {
      border: 1px solid #ccc;
}


I should be able to do something like this, but it doesn't work in IE...

input[type=checkbox] {
  border: none !important;
}


I suspect I could do a named class for only checkboxes...  it just doesn't make sense that I would have to :)


Top Expert 2007

Commented:
No way to make

input[type=checkbox]  {...}

work in IE6... No way that I know of, at least.

>I suspect I could do a named class for only checkboxes...  it just doesn't make sense that I would have to :)
If you want it to work in IE6 too, I guess you'll have to  ;)

It's easy to do it via javascript of course, but I guess you'd rather declare a class...
>  It's easy to do it via javascript of course, but I guess you'd rather declare a class...

What's that?  (perking up)   How do you do this in javascript?
Top Expert 2007

Commented:
Well, you can do something like this:

var cbxs=document.getElementsByTagName('INPUT');
for (var i=0; i<cbxs.length; i++) {
    if (cbxs[i].type="checkbox") {
         cbxs[i].borderColor="#f00";
    }
}
Top Expert 2007
Commented:
Sorry, here's a correct complete little example. Javascript will change (set to 0) on page load the border (set via CSS for all inputs) only for the checkboxes:

<html>
<head>
<style>
input {
  border:1px solid #f00;
}</style>

<script>

function styleInputs() {
   var cbxs=document.getElementsByTagName('INPUT');
   for (var i=0; i<cbxs.length; i++) {
       if(cbxs[i].type=='checkbox') {
         cbxs[i].style.border='none';
       }
    }
}

window.onload=styleInputs;
</script>

</head>
<body>
    <input type="text" size="14">
    <br>
    <input type="checkbox">
    <br>
    <input type="radio">
    <br>
    <input type="checkbox">
  </form>
</div>
</body>
</html>

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial