Variants of search form styling for inspiration

11.30.2013 by Ilia Raiskin

HTML CSS Design

In this tutorial I'll show you three different layouts for search forms. You can use the codes for your own projects or just use it for inspiration.

HTML code for all forms

<form>
<input type="text" name="example" class="input-1"/>
<input type="submit" value="search" />
</form>

CSS code

input[type=text] {
border: 2px solid rgb(241, 241, 241);
background: white;
padding: 12px 10px;
-webkit-font-smoothing: antialiased;
font-size: 15px;
color: rgb(109, 109, 109);
}
input[type="submit"] {
border: none;
padding: 14px 12px;
margin-left: -8px;
color: white;
background: rgb(2, 106, 165);
cursor: pointer;
font-size: 15px;
-webkit-font-smoothing: antialiased;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
input[type="submit"]:hover {
background: rgb(53, 53, 53);
}

CSS code

input[type=text] {
border: none;
background: rgb(241, 241, 241);
padding: 14px 10px;
-webkit-font-smoothing: antialiased;
font-size: 15px;
color: rgb(109, 109, 109);
width: 200px;
text-align: center;
}
input[type="submit"] {
border: none;
padding: 14px 0px;
color: white;
background: rgb(197, 36, 36);
cursor: pointer;
font-size: 15px;
-webkit-font-smoothing: antialiased;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
display: block;
margin-top: -2px;
width: 220px;
}
input[type="submit"]:hover {
background: rgb(53, 53, 53);
}

CSS code

input[type=text] {
border: 1px solid rgb(241, 241, 241);
background: white;
padding: 14px 10px;
-webkit-font-smoothing: antialiased;
font-size: 13px;
color: rgb(134, 134, 134);
}
input[type="submit"] {
border: 1px solid rgb(241, 241, 241);
padding: 14px 12px;
margin-left: -8px;
color: rgb(14, 158, 214);
background: rgb(255, 255, 255);
cursor: pointer;
font-size: 13px;
-webkit-font-smoothing: antialiased;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
input[type="submit"]:hover {
background: rgb(14, 158, 214);
color: white;
border: 1px solid rgb(14, 158, 214);
}

About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of Toolinfy.com.

Variants of search form styling for inspiration

HTML code for all forms

CSS code

CSS code

CSS code

About the author

Ilia Raiskin

Did you like this post? Any feedback is highly appreciated. Feel free to leave a comment.

Follow & Subscribe

About us

Info