Standaard CSS

CSS

#search-theme-form .form-text {
width: 124px;
height: 19px;
border: 1px solid;
border-color: #717171 #b4b4b4 #dadada #b4b4b4;
padding: 0 0 0 3px;
background: url(../images/search-bkg.gif) no-repeat top right;
line-height: 19px;
color: #9c9c9c;
font-size: 1.2em;
}

FireFox CSS

Volgende regel zet je het best direct nadien:

CSS

html>/**/body #search-theme-form .form-text,
x:-moz-any-link,
x:default {
height: 17px;
padding-top: 2px;
} /* Only FireFox 3 */

HTML

<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Formulier</h1>
<p>Eenvoudig en zuiver formulier</p>
<label>Naam
<span class="small">Geef uw naam</span>
</label>
<input type="text" name="name" id="name" />
<label>Email
<span class="small">Geef een valide adres</span>
</label>
<input type="text" name="email" id="email" />
<label>Paswoord
<span class="small">Min. 6 chars</span>
</label>
<input type="text" name="password" id="password" />
<button type="submit">Verstuur</button>
<div class="spacer"></div>
</form>
</div>

CSS

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- Mijn Formulier ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
border: none;
color:#FFF;
font-size:11px;
font-weight:bold;
}

Input veld zonder focus in Safari

Input veld met focus in Safari

Als je als ontwerper van een formulier dit niet wenst, kan je volgende CSS toepassen.

CSS

input:focus { outline: none; }

HTML

<div id="wrapper">
<form action="index.html" method="post">
<fieldset>
<legend>Contact Form</legend>
<p>Please fill in your details</p>
<ul>
<li><label for="name">Name <span>* Required</span></label></li>
<li><input type="text" id="name" name="name"/></li>
<li><label for="email">Email <span>* Required</span></label></li>
<li><input type="text" id="email" name="email"/></li>
<li><label for="url">Url</label></li>
<li><input type="text" id="url" name="url"/></li>
</ul>
<ul>
<li><label for="message">Message <span>* Required</span></label></li>
<li><textarea name="message" id="message" cols="20" rows="5"></textarea></li>
</ul>
<input type="submit" class="button" name="submit" value="Send"/>
<input type="reset" class="reset" value="Clear"/>
</fieldset>
</form>
</div>

CSS

body {
	font-family: Georgia, serif;
}
#wrapper {
	width:400px;
	margin: 0 auto;
	position: relative;
}
fieldset {
	border:1px solid #E8E8E8;
	padding: 10px;
	margin: 10px;
	width:300px;
}
legend {
  border: 1px solid #E8E8E8;
  padding:5px 15px;
}
p {
  font-size: 1.2em;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
	margin:10px 0;
	display:block;
}
li input, textarea {
	height:15px;
	padding:5px;
	border:1px solid #E8E8E8;
	width:288px;
}
textarea {
	font-family: Arial, sans-serif;
	font-size: 12px;
	height:150px;
}
span {
	color: #AC0000;
	font-size: 10px;
}
.button {
	border:1px solid #E8E8E8;
	padding:5px 10px;
	margin:0 5px 0 0;
	cursor: pointer;
	background: #AC0000;
	color: #FFF;
}
.reset {
	border:none;
	padding:5px 10px;
	margin:0 5px 0 0;
	cursor: pointer;
	background: #FFF;
	color: #AC0000;
}

HTML

<form action="post">
<dl>
<dt>Email:</dt>
<dd><input type="text" name="email" /></dd>
<dt>Name:</dt>
<dd><input type="text" name="name" /></dd>
</dl>
</form>

CSS

form {
width: 450px;
}
form dt {
   clear:both;
   width:33%;
   float:left;
   text-align:right;
}
form dd {
   float:left;
   width:66%;
   margin:0 0 0.5em 0.25em;
}

HTML

<form action="post">
 <p>
  <label for="name">Name</label>
  <input id="name" name="name" />
 </p>
 <p>
  <label for="address">Address</label>
  <input id="address" name="address" />
 </p>
 <p>
  <label for="city">City</label>
  <input id="city" name="city" />
 </p>
 </form>

CSS

label,input  {
display:  block;
width:  150px;
float:  left;
margin-bottom:  10px;
}
label  {
text-align:  right;
width:  75px;
padding-right:  20px;
}
p  {
clear:  left;
}

HTML

<input type="submit" class="submit" value="Submit Form" />

CSS

.submit {
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #00F;
  border-left: 0;
  color: #00F;
  display: inline;
  margin: 0;
  padding: 0;
  cursor: pointer; /* IE does not display a pointer */
}

*:first-child+html .submit { /* hack needed for IE 7 */
	border-bottom: 0;
	text-decoration: underline;
}

* html .submit {	/* hack needed for IE 5/6 */
	border-bottom: 0;
	text-decoration: underline;
}