Cela permet aussi de voir comment insérer directement du CSS.
J'ai rajouté les balises <center> pour centrer le formulaire dans la page. C'est évidemment facultatif.
<center>
<style type="text/css">
#searchbox
{
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 270px;
height: 35px;
padding: 10px;
overflow: hidden;
}
#search, #submit
{
float: left;
}
#search
{padding: 5px 9px;
height: 23px;
width: 180px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
-moz-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); }
#submit
{ background: #6cbb6b;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 60px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#submit:hover
{ background: #95d788;
background-image: -moz-linear-gradient(#6cbb6b, #95d788);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}
#submit:active
{
background: #95d788;
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#submit::-moz-focus-inner
{
border: none;
}
#search::-webkit-input-placeholder {
color: #9c9c9c;
font-style: italic;
}
#search:-moz-placeholder {
color: #9c9c9c;
font-style: italic;
}
#search.placeholder {
color: #9c9c9c !important;
font-style: italic;
}
#search:focus
{
border-color: #8badb4;
background: #fff;
outline: none;
} </style>
<form action="/search" id="searchbox" method="get">
<input id="search" name="q" placeholder="Type here" type="text" /> <input id="submit" type="submit" value="Search" /> </form>
</center>
Et ça donne...
Bien sûr, vous pouvez vous coltiner avec le CSS pour personnaliser l'aspect... Ce que j'ai fait en quelques minutes (aspect ci-dessus) et pourtant je n'y connais pas grand-chose en CSS... Il vaut mieux s'aider d'un utilitaire genre Color Picker permettant de tester et connaître les codes couleurs. J'ai utilisé Gcolor2 (Linux). Voici mon code modifié: code_search_box.txt
Un autre conseil: faites vos essais sur un blog de test et dans un nouveau message. Ainsi vous disposerez de la fonction "aperçu", ce qui vous fera beaucoup gagner de temps...
Aucun commentaire:
Enregistrer un commentaire