Utseendet på ett HTML-formulär kan förbättras avsevärt med CSS:
Använd egenskapen width
för att bestämma inmatningsfältets bredd:
input
{
width: 100%;
}
Prova själv →
<!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>
Exemplet ovan gäller alla <input>-element. Om du bara vill stil en specifik inmatningstyp kan du använda attributväljare:
input[type=text]
- kommer bara att välja textfält
input[type=password]
- kommer bara att välja lösenordsfält
input[type=number]
- kommer bara att välja nummerfält
etc..
Använd egenskapen padding
för att lägga till utrymme i textfältet.
Tips: När du har många ingångar efter varandra kan du kanske vill också lägga till lite marginal
för att lägga till mer utrymme utanför dem:
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Prova själv →
<!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>
Observera att vi har satt egenskapen box-sizing
till border-box
. Detta säkerställer att stoppningen och så småningom gränserna ingår i elementens totala bredd och höjd.
Läs mer om egenskapen box-sizing
i vårt kapitel om CSS Box Sizing.
Använd egenskapen border
för att ändra kantstorlek och färg, och använd egenskapen border-radius
för att lägga till rundade hörn:
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Prova själv →
<!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>
Om du bara vill ha en nedre kant, använd egenskapen border-bottom
:
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Prova själv →
<!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>
Använd egenskapen background-color
för att lägga till en bakgrundsfärg till indata, och egenskapen color
för att ändra textfärgen:
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Prova själv →
<!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>
Som standard kommer vissa webbläsare att lägga till en blå kontur runt ingången när den kommer fokus (klickat på). Du kan ta bort detta beteende genom att lägga till outline: none;
till indata.
Använd :focus
väljaren för att göra något med inmatningsfältet när det får fokus:
input[type=text]:focus
{
background-color: lightblue;
}
Prova själv →
<!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;
}
Prova själv →
<!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>
Om du vill ha en ikon i ingången, använd egenskapen background-image
och placera den med background-position
> egendom. Observera också att vi lägger till en stor vänster stoppning för att reservera utrymmet för ikonen:
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Prova själv →
<!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>
I det här exemplet använder vi CSS-egenskapen transition
för att animera bredden på sökinmatningen när den får fokus. Du kommer att lära dig mer om egenskapen transition
senare, i vårt kapitel om CSS-övergångar.
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Prova själv →
<!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>
Tips: Använd egenskapen resize
för att förhindra att storlek på textområden ändras (inaktivera "grabber" i det nedre högra hörnet):
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Prova själv →
<!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;
}
Prova själv →
<!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 */
Prova själv →
<!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>
För mer information om hur man stilar knappar med CSS, läs vår handledning för CSS-knappar.
Ändra storlek på webbläsarfönstret för att se effekten. När skärmen är mindre än 600px bred, får de två kolumnerna att staplas ovanpå varandra istället för bredvid varandra.
Avancerat: Följande exempel använder mediafrågor för att skapa ett responsivt formulär. Du kommer att lära dig mer om detta i ett senare kapitel.
Prova själv →
<!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>
Ett exempel på hur man formaterar etiketter tillsammans med indata för att skapa en horisontellt justerad form:
select
{
color: green;
display:
inline-block;
width: 130px;
text-align: right;
padding-right: 15px;
}
Prova själv →
<!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>