You can style your forms without extra markup by applying CSS rules to the <label> element. (You can also style <input>, <fieldset>, and <legend>, though results will vary from browser to browser.)
|
|
<p><label for="send"><strong> <span style="color: #006600;"> Where to send your $1 million: </span> </strong></label></p> <p><input type="text" id="send" size="30" /></p> <p><input type="checkbox" id="smallbills" /> <label for="smallbills"><em>Small bills only</em></label></p> <p></p> <pstyle="align="center"><input type="button" value="Send it now!" /></p> |
|
|
<label for="send">Where to send your $1 million:</label> <input type="text" id="send" size="30" /> <input type="checkbox" id="smallbills" /><label for="smallbills">Small bills only</label> <input type="button" value="Send it now!" /> |
.styled label { font-weight: bold; display: block; color: #006600; }
.styled input[type="text"] { margin: 6px 0;}
.styled input[type="checkbox"] { display: block; float: left; margin-right: 6px;}
.styled input[type="checkbox"] + label { color: black; float: left; font-style: italic; font-weight: normal; overflow: hidden; }
.styled input[type="button"] { display: block; clear: left; margin: 65px auto 0 ;}