How can I change checkbox (input) border's style? I've put border:1px solid #1e5180 upon it, but in FireFox 3.5, nothing happens!
views:
1762answers:
9Then you'll have a double border.
HeavyWave
2010-03-17 08:46:03
<div style="border-style: solid; width: 120px;"><input type="checkbox" name="mycheck">My Checkbox</input></div>works fine with htmlsandbox
Midhat
2010-03-17 09:32:46
Define 'works fine'. For instance, I've never seen a checkbox 120px wide.
D_N
2010-03-17 15:03:20
A:
Add a class in a style sheet:
.bordered { border: 1px solid #1e5180 }
Then add a div:
<div class="bordered">...</div>
That should work fine.
ileon
2010-03-17 07:38:04
+5
A:
If something happens in any browser I'd be surprised. This is one of those outstanding form elements that browsers tend not to let you style that much, and that people usually try to replace with javascript so they can style/code something to look and act like a checkbox.
Here's an example: prettyCheckboxes.
D_N
2010-03-17 07:38:11
+2
A:
Styling checkboxes (and many other input elements for that mater) is not really possible with pure css if you want to drastically change the visual appearance.
Your best bet is to implement something like jqTransform does which actually replaces you inputs with images and applies javascript behaviour to it to mimic a checkbox (or other element for that matter)
ChrisR
2010-03-17 07:39:05
+3
A:
For Firefox, Chrome and Safari, nothing happens.
For IE the border is applied outside the checkbox (not as part of the checkbox), and the "fancy" shading effect in the checkbox is gone (displayed as an oldfashioned checkbox).
For Opera the border style is actually applying the border on the checkbox element.
Opera also handles other stylings on the checkbox better than other browsers: color is applied as the color of the tick, background-color is applied as background color inside the checkbox (IE applies the background as if the checkbox was inside a <div> with background)).
Conclution
The easiest solution is to wrap the checkbox inside a <div> like others have suggested.
If you want to completely control the appearance you will have to go with the advanced image/javascript approach, also meantiond by others.
awe
2010-03-17 08:37:39
+1 for research, but wrapping it inside a div is *not* a solution. It doesn't let you style the checkbox, it lets you style *around* the checkbox, unless you start playing with trying to hide it and paint over it which will have its own problems.
D_N
2010-03-17 15:05:25
Well, the only browser that lets you style the checkbox itself is Opera. Wrapping it inside a div is a solution that may be good enough, but that really depends on what you want. IE actually acts like you put it in a div if you try to style the checkbox!
awe
2010-03-24 07:35:02
JavaScript is a script language used to do any visual effects, add functions like date, counters and so...; CSS is a style sheet language used to describe the presentation like the font style, size, colors and so ...
Amirouche Douda
2010-07-20 16:49:16
A:
<div style="border-style: solid;width:13px">
<input type="checkbox" name="mycheck" style="margin:0;padding:0;">
</input>
</div>
Midhat
2010-03-17 16:47:58
+1
A:
you should use
- -moz-appearance:none;
- -webkit-appearance:none; and
- -o-appearance:none;
then you get rid of the default checkbox image/style and can style it. Anyway a border will still there in Firefox
Vprimachenko
2010-07-03 15:12:08
Opera lets you style checkboxes without any extra hackery - I would leave off the -o-appearance style. -moz-appearance and -webkit-appearance are great, though.
Neall
2010-10-06 15:18:27
Oops - spoke too soon: "-webkit-appearance: none;" seems to disable the checkbox behavior.
Neall
2010-10-06 15:22:45
for me (chrome 5) it doesnt , you need to style the :checked state extra
Vprimachenko
2010-10-30 19:07:09