Wollte mal von euch so hören wie ihr Formulare
a) mögt
b) stylt
Hier mal ein bischen Spielerei von mir:
Styled Form
Was würdet ihr anders machen?
Der Code:
HTML
<input type="text" placeholder="Words">
<select multiple>
<option>Opt 1</option>
<option>Opt 2</option>
<option>Opt 3</option>
</select>
<textarea placeholder="Some Text"></textarea>
<input type="submit">CSS
*{margin: 0; padding: 0;}body{width: 50%; margin: auto;line-height: 1.5em;font-size: 1.05em;background-color: rgba(35,35,35, 1);font-family: 'Avenir Light',Arial,sans-serif;}
/* Normalzustand */
textarea,
select,
option,
input{
padding: 5px;
width: 100%;
border-radius: 4px;
background-color: rgba(255,255,255,.1);
border: none;
color: rgba(255,255,255, .6);
margin-top: 15px;
}
/* Wenn die Maus drüberfährt */
textarea:hover,
select:hover,
option:hover,
input:hover{
background-color: rgba(0,190,255, .5);
color: rgba(255,255,255, 1);
transition: all 0.4s;
}
/* Wenn man gerade im Feld etwas eingibt */
textarea:focus,
select:focus,
option:focus,
input:focus{
background-color: rgba(255,255,255, .03);
color: rgba(255,255,255, 1);
transition: all 0.3s;
}
/* Im select für Ordnung sorgenn */
option{
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 3px;
}
/* Text Box */
textarea{
/* Nur in der Höhe verändebar */
resize: vertical;
/* mindestens 2,5 Zeilen hoch */
min-height: 2.5em;
/* maximal ... */
max-height: 100px;
}
/* Absenden Button */
input[type="submit"]{
width: auto;
border: 2px solid rgba(0,190,255, .5);
background-color: rgba(255,255,255,0);
}
input[type="submit"]:hover{
border: 2px solid rgba(0,190,255, 1);
background-color: rgba(255,255,255, .1);
}
