PDA

View Full Version : Styling A Checkbox in a Form

ldiuf
08-09-2002, 12:18 AM
parden me but isn't it possible to make a checkbox's borders to be not there or look differently with a style sheet. Or something with mozilla styling like the opacity?

Thanks,
Larry
Mhtml
08-09-2002, 09:56 AM
I don't think that that you can do that to form elements.
Bosko
08-09-2002, 12:13 PM
Ofcourse its possible,you can customize most form elements with CSS.Heres some example code for customizing checkboxes:

<style type="text/css">
input[type="checkbox"] {
width:22px;
height:22px;
color:yellow;
border:4px outset green;
background-color:green;
}
</style>
landon11
08-09-2002, 10:10 PM
If you realy want to change a checkbox you could do some thing like this:

http://www14.brinkster.com/iitestii/checkbox.htm
BrainJar
08-10-2002, 06:46 PM
You can set styles for form elements but how they appear will depends on the browser.

Netscape6/Mozilla handles controls using its own mechanisms. So most stylings will work.

IE relies on exisiting Windows controls for many form elements. So there is some limit to what you can do. It won't hurt to set styles for them, they just don't work as expected.

Also, IE doesn't recognize attribute selectors like input[type="checkbox"]. You'd have to use a class selector and add the class name to the checkbox's INPUT tag.
ldiuf
08-10-2002, 10:30 PM
True, all those suggestions changed the added borders that were changeable and even the background (which is good) but I want to actually have no border for the checkbox what so ever. You know... The darn grey ones that show by default.

Cheers,
Larry
Mhtml
08-11-2002, 05:55 AM
What I meant was that I didn't think that you could use alpha with form elements, evrytime I try it never works.
Bosko
08-11-2002, 04:47 PM
You can use -moz-opacity on everything,even on the whole page (HTML element).
ldiuf
08-11-2002, 11:35 PM
so then we are in the belief that one cannot totally get rid of those stupid default grey border for the checkbox, you can only add to it?

Larry
jkd
08-12-2002, 12:51 AM
Originally posted by ldiuf
so then we are in the belief that one cannot totally get rid of those stupid default grey border for the checkbox, you can only add to it?

Larry

If you use IE, yes. If you use Mozilla, no. Because of Moz's own widgets, you can style them to no extent.
brothercake
08-12-2002, 01:48 AM
You could use images for checkboxes, use the onclick event to rollover a checked/unchecked image, and then read the value back by getting the src
beetle
08-12-2002, 03:39 PM
Giving a border and background-color attributes to a checkbox in IE will affect the area AROUND the checkbox, and not the checkbox iself. This is because of what BrainJar mentioned earlier, IE relies on windows components for checkboxes, radio buttons, and SELECT menus.
ldiuf
08-12-2002, 03:41 PM
Thanks for all the info.

Cheers,
Larry:thumbsup:
adios
08-14-2002, 01:56 AM
Haven't worked out the equivalent in moz, but....

<html>
<head>
<title>untitled</title>
<style type="text/css">

.offbox {
width: 26px;
height: 24px;
border: 6px #2884cc outset;
background: darkgray;
filter: invert;
}

.onbox {
width: 26px;
height: 24px;
border: 6px #cc4844 inset;
background: darkgray;
}

div.borders {
width: 32px;
border: 3px #cc7724 inset;
}

body {
margin: 60px;
background: #9c7f72;
}

</style>
</head>
<body>
<form>
<div class="borders"><input class="offbox" type="checkbox"
onclick="this.className=this.checked?'onbox':'offbox'"></div>
<div class="borders"><input class="offbox" type="checkbox"
onclick="this.className=this.checked?'onbox':'offbox'"></div>
<div class="borders"><input class="offbox" type="checkbox"
onclick="this.className=this.checked?'onbox':'offbox'"></div>
<div class="borders"><input class="offbox" type="checkbox"
onclick="this.className=this.checked?'onbox':'offbox'"></div>
<div class="borders"><input class="offbox" type="checkbox"
onclick="this.className=this.checked?'onbox':'offbox'"></div>
</form>
</body>
</html>
blindbull
10-18-2002, 04:24 PM
I am using the following from your code and expect the colour of the checkbox to look grey like a disabled check box. However, it doesn't do this. Is there a way of making a check box look disabled?

.offbox {
width: 26px;
height: 24px;
border: 6px #CCCCCC outset;
background: #CCCCCC;
filter: #CCCCCC invert;
}