Skip to content

Instantly share code, notes, and snippets.

@FernE97
Created April 9, 2012 21:21
Show Gist options
  • Save FernE97/2346630 to your computer and use it in GitHub Desktop.
Save FernE97/2346630 to your computer and use it in GitHub Desktop.
css: search form
/*=Search Box
-----------------------------*/
#search-box {
position:absolute;
top:30px;
right:80px;
}
#search-box input[type=text] {
font-family:sans-serif;
background:#fff;
color:#4a4a4a;
font-size:1em;
line-height:1.2;
margin:0;
padding:.5em;
width:13.5em;
height:1.2em;
outline:none;
border:0;
-webkit-border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
vertical-align:top;
}
#search-box input[type=text]:active,
#search-box input[type=text]:focus {
-webkit-box-shadow:inset 2px 2px 8px rgba(0,0,0,.4);
-moz-box-shadow:inset 2px 2px 8px rgba(0,0,0,.4);
box-shadow:inset 2px 2px 8px rgba(0,0,0,.4);
}
#search-box button {
font-family:sans-serif;
font-size:1em;
font-weight:bold;
color:#fff;
height:2.1875em;
position:relative;
left:-8px;
padding:0 1em;
cursor:pointer;
border:0;
-webkit-border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
border-radius:0 5px 5px 0;
background:#e41c21;
background:-moz-linear-gradient(top, hsla(358,79%,50%,1) 0%, hsla(359,84%,37%,1) 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(358,79%,50%,1)), color-stop(100%,hsla(359,84%,37%,1)));
background:-webkit-linear-gradient(top, hsla(358,79%,50%,1) 0%,hsla(359,84%,37%,1) 100%);
background:-o-linear-gradient(top, hsla(358,79%,50%,1) 0%,hsla(359,84%,37%,1) 100%);
background:-ms-linear-gradient(top, hsla(358,79%,50%,1) 0%,hsla(359,84%,37%,1) 100%);
background:linear-gradient(top, hsla(358,79%,50%,1) 0%,hsla(359,84%,37%,1) 100%);
}
#search-box button:active,
#search-box button:focus {
background:#ad0f12;
background:-moz-linear-gradient(top, hsla(360,90%,54%,1) 0%, hsla(359,84%,37%,1) 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(360,90%,54%,1)), color-stop(100%,hsla(359,84%,37%,1)));
background:-webkit-linear-gradient(top, hsla(360,90%,54%,1) 0%,hsla(359,84%,37%,1) 100%);
background:-o-linear-gradient(top, hsla(360,90%,54%,1) 0%,hsla(359,84%,37%,1) 100%);
background:-ms-linear-gradient(top, hsla(360,90%,54%,1) 0%,hsla(359,84%,37%,1) 100%);
background:linear-gradient(top, hsla(360,90%,54%,1) 0%,hsla(359,84%,37%,1) 100%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment