Hi!
I just want change the styles of textarea, text box (input type = "text" ), select and buttopm. With the code given below its OK. Works fine.
textarea { font-size: 10px; font-family: Verdana; border-style: solid; border-width: 1;
padding-left: 4; padding-right: 4; padding-top: 1;
padding-bottom: 1 }
input { font-family: Verdana; font-size: 10px; border-style: solid; border-width: 1;
padding-left: 4; padding-right: 4; padding-top: 1;
padding-bottom: 1 }
select { font-size: 10px; font-family: Verdana; border-style: solid; border-width: 1;
padding-left: 4; padding-right: 4; padding-top: 1;
padding-bottom: 1 }
button { font-family: Verdana; font-size: 10; border-style: solid; border-width: 1;
padding-left: 4; padding-right: 4; padding-top: 1;
padding-bottom: 1 }
But then I wanted to use check boxes and radio buttons without specific styles. But since they also comes from the <input > tag the default style which I used for text boxes are applied to here also.
That is rectangular borders are appering around check boxes and radio buttons. And I dont like it.
I'd like to have it without borders.
Can someone please let me know how to separate check box and radio buttom styles from text box styles. I couldn't find a way so far. I'm very new to CSS and the above code is also generated with FrontPage..
Thanks and Best RegardsWith class:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>a touch of class</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
/* generic form elements */
textarea, input, select, button {
font-size: 10px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
border:1px solid black;
padding:1px 4px;
}
/* special form elements */
.noborder {
border:0;
background:#ddd;
}
-->
</style>
</head>
<body>
<input type="text">
<input class="noborder" type="text">
</body>
</html>a) use CSS classes for the different type of input element
input.checkbox {}
input.radio {}
input.text {}
input.password {}
input.submit {}
input.image {}
input.reset {}
<input type="text" class="text" name="forename" id="forename" value="enter forename">
<input type="checkbox" class="checkbox" name="email" id="email" value="confirm">
b) address input elements in CSS using their id attribute:
text fields:
#forename,#surname,#telephone,#postcode { generic text field styles}
checkboxes:
#email,#post { generic checkbox styles}
radio buttons:
#sex, #usertype {generic radio button styles}
c) use some of the more sophisticated CSS functionality,
(<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/selector.html">http://www.w3.org/TR/CSS21/selector.html</a><!-- m -->), may not wonderfully supported across different browsers/OS's.
input[type="text"] { text field styles}
input[type="checkbox"] {checkbox styles}
input[type="radio"] {radio button style}
input[type="select"] {select element styles]
Styling checkbox and radiobuttons is a bit hit-and-miss.Thank you both very much for helping on my first ever CSS.
I just want change the styles of textarea, text box (input type = "text" ), select and buttopm. With the code given below its OK. Works fine.
textarea { font-size: 10px; font-family: Verdana; border-style: solid; border-width: 1;
padding-left: 4; padding-right: 4; padding-top: 1;
padding-bottom: 1 }
input { font-family: Verdana; font-size: 10px; border-style: solid; border-width: 1;
padding-left: 4; padding-right: 4; padding-top: 1;
padding-bottom: 1 }
select { font-size: 10px; font-family: Verdana; border-style: solid; border-width: 1;
padding-left: 4; padding-right: 4; padding-top: 1;
padding-bottom: 1 }
button { font-family: Verdana; font-size: 10; border-style: solid; border-width: 1;
padding-left: 4; padding-right: 4; padding-top: 1;
padding-bottom: 1 }
But then I wanted to use check boxes and radio buttons without specific styles. But since they also comes from the <input > tag the default style which I used for text boxes are applied to here also.
That is rectangular borders are appering around check boxes and radio buttons. And I dont like it.
I'd like to have it without borders.Can someone please let me know how to separate check box and radio buttom styles from text box styles. I couldn't find a way so far. I'm very new to CSS and the above code is also generated with FrontPage..
Thanks and Best RegardsWith class:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>a touch of class</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
/* generic form elements */
textarea, input, select, button {
font-size: 10px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
border:1px solid black;
padding:1px 4px;
}
/* special form elements */
.noborder {
border:0;
background:#ddd;
}
-->
</style>
</head>
<body>
<input type="text">
<input class="noborder" type="text">
</body>
</html>a) use CSS classes for the different type of input element
input.checkbox {}
input.radio {}
input.text {}
input.password {}
input.submit {}
input.image {}
input.reset {}
<input type="text" class="text" name="forename" id="forename" value="enter forename">
<input type="checkbox" class="checkbox" name="email" id="email" value="confirm">
b) address input elements in CSS using their id attribute:
text fields:
#forename,#surname,#telephone,#postcode { generic text field styles}
checkboxes:
#email,#post { generic checkbox styles}
radio buttons:
#sex, #usertype {generic radio button styles}
c) use some of the more sophisticated CSS functionality,
(<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/selector.html">http://www.w3.org/TR/CSS21/selector.html</a><!-- m -->), may not wonderfully supported across different browsers/OS's.
input[type="text"] { text field styles}
input[type="checkbox"] {checkbox styles}
input[type="radio"] {radio button style}
input[type="select"] {select element styles]
Styling checkbox and radiobuttons is a bit hit-and-miss.Thank you both very much for helping on my first ever CSS.