Highlighted input and textarea on focus
HTML
CSS
input:focus, textarea:focus{
background-color: lightyellow;
}
==============================
Style up the ul list markers
HTML
<ul>
<li>News</li>
<li>Sports</li>
<li>Webmaster<ul>
<li>CSS Drive</li>
<li>PHP.net</li>
</ul>
</li>
</ul>
CSS
ul li{
list-style-type: square;
list-style-image:url(fold.gif);
padding-left: 3px;
}
ul li ul li{
list-style-image:url(list.gif);
}
===============================
Tableless forms
HTML
<form>
<label for=”user”>Name</label>
<input type=”text” name=”user” value=”" /><br />
<label for=”emailaddress”>Email Address:</label>
<input type=”text” name=”emailaddress” value=”" /><br />
<label for=”comments”>Comments:</label>
<textarea name=”comments”></textarea><br />
<label for=”terms”>Agree to Terms?</label>
<input type=”checkbox” name=”terms” class=”boxes” /><br />
<input type=”submit” name=”submitbutton” id=”submitbutton” value=”Submit” />
</form>
CSS
label{
float: left;
width: 120px;
font-weight: bold;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
textarea{
width: 250px;
height: 150px;
}
.boxes{
width: 1em;
}
#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
br{
clear: left;
}