Champ de recherche CSS3

 

La création d'un champ de recherche sur un site web, tout site en a un ou presque, mise à part celui de Google, moi je vous parle, d'un champ lié à moteur de recherche interne, comme celui que j'ai sur ce site. Ainsi avec un tel champ vous pouvez le personnaliser, le rendre plus agréable, mais surtout l'adapter au design de votre site. Avec du CSS3 la personnalisation d'un tel champ est assez aisé à faire.

Ci-dessous un exemple de formulaire, pour ce champ, comme vous pouvez le constater il est très simple à réaliser. Il suffit ensuite de l'adapter à votre script en Ajax, qui lui même est lié à votre base de données.

                        <form class="form">
                        <div class="recherche">
                        <input type="text" name="keyword" value="Recherche"/>
                        <button>ok</button>
                        </div>
                        </form>
                      

Le code CSS ci-dessous permet de styliser le formulaire, ou plutôt le champ lui même.
Si vous appliquez ce code CSS à ce formulaire, le bouton est mis en forme ainsi que le champ.
Toutefois, si vous constatez une différence d'affichage selon le navigateur que vous utilisez, il suffit de rajouter à l'attribut le préfixe adéquat.
Comme toujours, pour IE c'est pas le top, avec IE11 (ok) mais, les autres IE < à IE11 sans commentaires.

                        .form div{
                            width:245px;
                            box-shadow: 0 0 5px 1px #999;
                            -moz-box-shadow: 0 0 5px 1px #999;
                            -webkit-box-shadow: 0 0 5px 1px #999;
                            border:0px solid #f7f7f7;
                            -webkit-border-radius:20px;
                            -moz-border-radius:20px;
                            border-radius:20px;
                            margin:10px 0;
                            padding:5px;
                  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd');/*IE<10*/
                            background-image: -moz-linear-gradient(top, #ffffff, #dddddd);
                            background-image: -webkit-gradient(linear,center top,center bottom,from(#ffffff),to(#dddddd));
                            background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #DDDDDD 100%);/*IE10 IE11*/
                        }
                        .form div input{
                            background: #fff;
                            width:180px;
                            -webkit-border-radius:15px;
                            -moz-border-radius:15px;
                            border-radius:15px;
                            border:1px solid #ccc;
                            height:27px;
                            font-weight:bold;
                            padding-left:10px;
                            padding-right:10px;
                        }
                        .form button{
                            cursor:pointer;
                            border:0px solid #f7f7f7;
                            -webkit-border-radius:15px;
                            -moz-border-radius:15px;
                            border-radius:15px;
                            width:30px;
                            height:30px;
                            color:#fff;
             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222');/*IE<10*/
                            background:#111;
                            background-image:-moz-linear-gradient(top, #444444, #222222);
                            background-image: -webkit-gradient(linear,center top,center bottom,from(#444444),to(#222222));
                            background-image: -ms-linear-gradient(bottom, #444444 0%, #222222 100%);/*IE10 IE11*/
                            -webkit-transition: all 1s ease-in;
                            -moz-transition: all 1s ease-in;
                            -o-transition: all 1s ease-in;
                        }
                        .form button:hover{
                            -webkit-transform: rotateY(180deg);
                            -moz-transform: rotate(180deg);
                            -o-transform: rotate(180deg);
                        }
             

La démo utilise les mêmes codes que ceux cités dans les onglets de code.



Ci-dessous le lien vers la démo. Démo