HTML-lomakkeen ulkoasua voidaan parantaa huomattavasti CSS:llä:
Määritä syöttökentän leveys width
-ominaisuuden avulla:
input
{
width: 100%;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
}
</style>
</head>
<body>
<h2>A full-width input field</h2>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Yllä oleva esimerkki koskee kaikkia <input>-elementtejä. Jos vain haluat tyyliin tietyn syöttötyypin, voit käyttää määritteiden valitsimia:
input[type=text]
- valitsee vain tekstikentät
input[type=password]
- valitsee vain salasanakentät
input[type=number]
- valitsee vain numerokenttiä
jne..
Käytä täyte
-ominaisuutta lisätäksesi tilaa tekstikenttään.
Vinkki: jos sinulla on useita syötteitä peräkkäin, saatat haluat myös lisätä marginaalin
lisätäksesi tilaa niiden ulkopuolella:
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>Padded input fields</h2>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Huomaa, että olemme määrittäneet box-sizing
-ominaisuuden arvoon border-box
. Tämä varmistaa, että pehmusteet ja lopulta reunat ovat mukana elementtien kokonaisleveys ja korkeus.
Lue lisää box-sizing
-ominaisuudesta CSS-laatikon koko -luvusta.
Käytä border
-ominaisuutta muuttaaksesi reunuksen kokoa ja väriä lisää pyöristetyt kulmat border-radius
-ominaisuuden avulla:
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
}
</style>
</head>
<body>
<h2>Input fields with borders</h2>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Jos haluat vain alareunuksen, käytä ominaisuutta border-bottom
:
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<h2>Input fields with bottom border</h2>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Käytä background-color
-ominaisuutta lisätäksesi taustavärin syötteeseen ja color
-ominaisuus muuttaaksesi tekstin väriä:
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
background-color: #3CBC8D;
color: white;
}
</style>
</head>
<body>
<h2>Input fields with color</h2>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
Oletusarvoisesti jotkin selaimet lisäävät sinisen reunuksen syötteen ympärille, kun se saa sen tarkenna (klikkattiin). Voit poistaa tämän toiminnan lisäämällä syötteeseen outline: none;
.
Käytä :focus
-valitsinta tehdäksesi jotain syöttökentällä, kun se kohdistuu:
input[type=text]:focus
{
background-color: lightblue;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
}
input[type=text]:focus {
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Input fields with color on :focus</h2>
<p>Here, the input field gets a color when it gets focus (clicked on):</p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
input[type=text]:focus
{
border: 3px solid #555;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid #555;
}
</style>
</head>
<body>
<h2>Input fields with black border on :focus</h2>
<p>Here, the input field gets a black border color when it gets focus (clicked on). We have also added the CSS transition property to animate the border color (takes 0.5 seconds to change the color on focus):</p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
Jos haluat kuvakkeen syötteen sisään, käytä taustakuva
-ominaisuutta ja sijoita se tausta-sijaintiin
omaisuutta. Huomaa myös, että lisäämme suuren vasemman täytön varataksesi tilan kuvakkeelle:
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>
<h2>Input field with an icon inside</h2>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
Tässä esimerkissä käytämme CSS:n siirtymä
-ominaisuutta animoidaksemme hakusyötteen leveyden, kun se kohdistetaan. Saat lisätietoja siirtymä
-ominaisuudesta myöhemmin CSS-siirtymät-luvussa.
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<h2>Animate width of search input</h2>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
Vinkki: Käytä muuta kokoa
-ominaisuutta estääksesi tekstialueiden koon muuttamisen (poista "kaappaus" käytöstä oikeassa alakulmassa):
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
</style>
</head>
<body>
<h2>Styling textarea</h2>
<p><strong>Tip:</strong> Use the resize property to prevent textareas from being resized (disable the "grabber" in the bottom right corner):</p>
<form>
Some text...</textarea>
</form>
</body>
</html>
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Styling a select menu</h2>
<form>
<select id="country" name="country">
<option value="au">Australia</option>
<option value="ca">Canada</option>
<option value="usa">USA</option>
</select>
</form>
</body>
</html>
input[type=button], input[type=submit], input[type=reset]
{
background-color: #04AA6D;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Styling form buttons</h2>
<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</body>
</html>
Lisätietoja painikkeiden tyylistä CSS:llä on CSS-painikkeiden opetusohjelmassamme.
Muuta selainikkunan kokoa nähdäksesi vaikutuksen. Kun näyttö on alle 600 pikseliä leveä, pinoa kaksi saraketta päällekkäin vierekkäin.
Lisäasetukset: Seuraava esimerkki käyttää mediakyselyitä reagoivan lomakkeen luomiseen. Saat lisätietoja tästä myöhemmässä luvussa.
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>
<br>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Esimerkki tarrojen tyylistämisestä yhdessä syötteiden kanssa vaakasuuntaisen tasatun lomakkeen luomiseksi:
select
{
color: green;
display:
inline-block;
width: 130px;
text-align: right;
padding-right: 15px;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.label {
color: green;
display: inline-block;
width: 130px;
text-align: right;
padding-right: 15px;
}
input[type=text] {
width: 200px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>Aligned form:</p>
<form>
<div>
<label for="fname10" class="label">First Name</label>
<input type="text" id="fname10" name="firstname">
</div>
<div>
<label for="mname" class="label">Middle Name</label>
<input type="text" id="mname" name="lastname">
</div>
<div>
<label for="lname10" class="label">Last Name</label>
<input type="text" id="lname10" name="lastname">
</div>
</form>
</body>
</html>