close[x]


CSS

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2



learncodehere.com




CSS - Forms

You can change the look of a form with CSS.

This means the form lists are changed its look when you mouse hover on the form.

With CSS you can create different look of forms.

You can also add different styles to the HTML form.


Example : Forms

<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
background-color: blue;
color : white;
width:300px;
}
input:focus {
background-color: red;
border: 3px solid green;
}
</style>
</head>
<body>

<p>Form Properties are changed while mouse hover.</p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
</form>

</body>
</html>

Hover your mouse on the form below to change the properties of the form.

When the above code is compiled , it produces the following result.

Result

Form Properties are changed while mouse hover.



You can also create animated search and animated drop dropdown with style.


Example : Forms

<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 130px;
box-sizing: border-box;
border: 2px solid blue;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}

input:focus {
width: 100%;
}
select {
width: 50%;
padding: 16px 20px ;
border: none;
border-radius: 4px;
background-color: white;
}
</style>
</head>
<body>

<h3>Animated search</h3>

<form>
<input type="text" name="search" placeholder="Search..">
</form>

<h3>A styled Select Menu</h3>

<form> <select id="programming" name="programming">
<option value="au">PHP</option>
<option value="ca">CSS</option>
<option value="usa">SQL</option>
</select>
</form>
</body>
</html>

Hover your mouse on the search and dropdown below to change the properties.

When the above code is compiled , it produces the following result.

Result

Animated search

A styled Select Menu