gdemaria
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;
}
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;
}
Does this address your issue?
https://www.experts-exchange.com/questions/20735377/Checkbox-style.html
https://www.experts-exchange.com/questions/20735377/Checkbox-style.html
as those aéle,´ments
should read
as those elements ;o)
should read
as those elements ;o)
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.
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...
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...
ASKER
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?
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">
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... :)
ASKER
> 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 :)
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...
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...
ASKER
> 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?
What's that? (perking up) How do you do this in javascript?
Well, you can do something like this:
var cbxs=document.getElementsB yTagName(' INPUT');
for (var i=0; i<cbxs.length; i++) {
if (cbxs[i].type="checkbox") {
cbxs[i].borderColor="#f00" ;
}
}
var cbxs=document.getElementsB
for (var i=0; i<cbxs.length; i++) {
if (cbxs[i].type="checkbox") {
cbxs[i].borderColor="#f00"
}
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://www.brainerror.net/scripts_js_checkbox.php