-Note the Username/Password Entry. I want the Checkbox/Radio Button to have a similar format, a simple box, with no beveled appearance. and no background color around the box. Rather, a smaller, box version of that field. I looked all over CSS places but I can't find the attributes to manipulate, and I feel like there are none. If that's the case, can I get around this problem, using an image instead?
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Changing color/border of a checkbox/radio button. 1
- Thread starter SetoKaiba
- Start date
-
1
- #2
I don't think it is possible to control "border" inside checkbox through CSS.
You can try something like:
You can try something like:
Code:
<form method="post" name="loginform">
Username:<input type="text" name="username"><br>
Password:<input type="text" name="password"><br>
<input type="checkbox" name="remember" style="display: none;">
Remember me <img src="cb_off.gif" onclick="setRemember( this );"><br>
<input type="submit" value="Log in now">
</form>
<script language="javascript">
function setRemember( oImg )
{ var hiddenCB = document.forms["loginform"]["remember"];
oImg.src = hiddenCB.checked? "cb_off.gif": "cb_on.gif";
hiddenCB.checked = !hiddenCB.checked;
}
</script>- Thread starter
- #3
Hmmm, that trick worked, but it skips the tab order, where some people press tab, and want to get on that checkbox (Weird yes..) so it sacrifices user friendliness. Its a great script though and I compliment you on it, unfortunately I can't really use it.
You can use a class to change the appearance of a checkbox.
For example:
then
For example:
Code:
.checkbox {
margin:0;
padding:0;
width:12px;
height:12px;
background:white;
border:none;
}then
Code:
<input name="fld_optIn" type="checkbox" id="optIn" value="checkbox" class="checkbox"/>To effect the actual border of the text box you need to add INPUT to the style sheet
Examle:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.fullname INPUT{
font-size:12px;
border-right : solid #F7B0B5 3px;
border-left : solid #F7B0B5 3px;
border-top : solid #F7B0B5 3px;
border-bottom : solid #F7B0B5 3px;
width:274px;
}
</style>
</head>
<body>
<table><tr>
<td>
<div class="fullname"><br>
<input type="text" name="tempName" value="<>" >
</div>
</td>
</tr></table>
</body>
</html>
Examle:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.fullname INPUT{
font-size:12px;
border-right : solid #F7B0B5 3px;
border-left : solid #F7B0B5 3px;
border-top : solid #F7B0B5 3px;
border-bottom : solid #F7B0B5 3px;
width:274px;
}
</style>
</head>
<body>
<table><tr>
<td>
<div class="fullname"><br>
<input type="text" name="tempName" value="<>" >
</div>
</td>
</tr></table>
</body>
</html>
- Status
Similar threads
- Locked
- Question
- Locked
- Question