Petite astuce en CSS

7 décembre 2011 2
Attention ! Ce post a plus de 1 an, ce qui signifie qu'il n'est pas forcément à jour !

Oui, en fait j’avais pas mal de soucis avec cette barre de recherche que l’on voit en haut à droite.

En effet, j’avais beau lui mettre un fond transparent, il y a une bordure (celle qui devient orange) qui ne voulait pas disparaître, malgré mes nombreux « border : none » lors du focus.

En gros, lorsque je ne cliquais pas dessus, il était telle que l’image au dessus le montre, mais dès qu’on cliquait, cette bordure revenait.

Voici le code que j’ai utilisé pour ma barre de recherche :)

#search {
    position: relative;
    float: right;
    top:124px;
    right: 195px;
}
#search input[type=text] {
    position: relative;
    border:0px;
    width: 218px;
    height: 25px;
    background-color:transparent;

}

#search input:focus {
    border:none;
    outline: 0 none; /* PERMET D’ENLEVER CETTE **** DE BORDURE ORANGE */
}

#search input[type=submit] {
    position: relative;

    position: relative;
    width: 25px;
    height: 25px;
    border: none;
    background-color:transparent;
    cursor: pointer;
    font-size: 0px;
}

J’espère que ça servira à quelqu’un un de ces quatre !