می توان ظاهر فرم های HTML را با استفاده از CSS  بسیار بهتر کرد.

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

استایل دهی به فیلد های ورودی

با استفاده از صفت width می توان عرض یک فیلد را تعیین کرد.

مثال :

input {
    width: 100%;
}

ورودی های فاصله دار

می توان از صفت padding برای اضافه کردن فواصل بین متن ورودی و دیواره های فیلد ، استفاده کرد.

نکته ! اگر وردی های زیادی در کنار هم داشته باشید باید مقداری margin نیز برای آنها تعیین کنید تا بیرون از فیلد و بین آنها فاصله جداکننده ای ایجاد شود.

مثال :

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

ورودی های دارای خط حاشیه

با استفاده از صفت  border می توان اندازه و رنگ خط حاشیه را تعیین کرد . با استفاده از صفت border-radius به ورودی ها ، گوشه های انحنادار می دهیم.

مثال :

input[type=text] {
    border: 2px solid red;
    border-radius: 4px;
}

input[type=text] {
    border: none;
    border-bottom: 2px solid red;
}

ورودی های رنگ دار

از صفت background-color می توان برای تعیین رنگ زمینه ورودی ها استفاده کرده و با استفاده از صفت color رنگ متن را تغییر دهیم.

مثال :

input[type=text] {
    background-color: #3CBC8D;
    color: white;
}

ورودی های متمرکز

زمانی که بر روی یک ورودی مترکز می شویم (کلیک می کنیم) ، برخی از مرورگر های بطور پیش فرض ، یک خط حاشیه آبی به دور ورودی اضافه می کنند. با استفاده از ;outline:none می توان این حرکت مرورگر را حذف کرد.
با استفاده از سلکتور focus: می توان عملی را برای فیلد ها تنظیم کرد تا به هنگام کلیک شدن اتفاق بیافتد.

مثال :

input[type=text]:focus {
    background-color: lightblue;
}

input[type=text]:focus {
    border: 3px solid #555;
}

ورودی های آیکون دار

اگر می خواهید داخل یک ورودی آیکونی داشته باشید ، از صفت background-image استفاده کنید و از صفت background-posotion برای موقعیت دهی آن استفاده کنید.
همچنین توجه داشته باشید که در مثال زیر ما مقداری padding چپ اضافه کرده ایم تا بین آیکون و متن ورودی فاصله ایجاد شود.

مثال :

input[type=text] {
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
}

باکس جستجوی متحرک

در مثال زیر برای متحرک شدن باکس جستجو ، از صفت transition در زبان CSS3 استفاده کرده ایم تا عرض ورودی جستجو را زمانی که روی آن کلیک می شود بیشتر کنیم.
درباره صفت transition بعدا در درس CSS3 transition یاد خواهید گرفت.

مثال :

input[type=text] {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}

استایل دهی به ورودی متن

در فیلدهایی که ورودی آنها متن و پیام باشد ( Textarea ) در زبان فارسی ، گوشه پایین چپ فیلد و در انگلیسی ، گوشه پایین راست فیلد متنی ، ابزاری ( grabber ) برای تغییر اندازه باکس قرار می گیرد. برای تنظیم و محدود کردن این ابزار از صفت resize استفاده می کنیم.

مثال :

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}

استایل دهی به منو های انتخابی

مثال :

select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}

استایل دهی به دکمه های فرم ها

input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

/* راهنمایی : برای داشتن دکمه های تمام عرض از width: 100% استفاده کنید. */