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 !


2 réponses à “Petite astuce en CSS”

  1. Anonymous dit :

    mais non mais non, t’inquiètes pas, c’est bien utile ;)… mais un outline : none; suffit

  2. Il me semble qu’il a essayé le ‘outline : none’ et que ça ne donnait pas ce qu’il voulait.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *