Link to home
Start Free TrialLog in
Avatar of gdemaria
gdemariaFlag for United States of America

asked on

remove checkbox border

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;
}
Avatar of TName
TName

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
as those aéle,´ments
should read
as those elements  ;o)


Avatar of gdemaria

ASKER

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.
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?
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">
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 :)


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?
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";
    }
}
ASKER CERTIFIED SOLUTION
Avatar of TName
TName

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial