[HTML] Focus dell'input

[Sarrio]

Perchè il seguente codice html e css

<input class="searchBar" name="search" placeholder="Ciao" />





.searchBar {                                        /* CSS */
    display: inline-block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    cursor: pointer;

    padding: 5px 50px 5px 20px;
    border: 2px solid #b7b7b7;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    font: normal 20px/normal "inherit", Times New Roman, Georgia, Serif;
    color: #2dcc0d;
    word-spacing: 16px;
    -webkit-box-shadow: 4px 4px 15px 4px rgba(0,0,0,0.2) ;
    box-shadow: 4px 4px 15px 4px rgba(0,0,0,0.2) ;
}
.searchBar:focus {
    border: 3px solid #ff7f00;
    -webkit-border-radius: 15px ;
    border-radius: 15px;
}

quando avviene il focus del campo il bordo non diventa arancione, bensì il campo viene circondato da un brutto rettangolo blu?

 

[Max 1]

Perchè non diventa arancione? A me si!

 

[AdeKnite]

Ciao. Ho provato a eseguire il tuo codice ed effettivamente, come hanno già confermato, il campo assume il bordo arancione, tuttavia a me compare ancora il rettangolo blu
.

Per risolvere, basta che aggiungi l'attributo outline al focus e lo setti a none .

.searchBar:focus {
    border: 3px solid #ff7f00;
    -webkit-border-radius: 15px ;
    border-radius: 15px;
    outline: none;
}

Anticipazione (Spoiler)

A volte capita che la pagina che ti viene restituita è quella conservata nella cache e che, quindi, non riesci a visualizzare alcune modifiche. Se pensi che possa essere il tuo caso, prova a svuotarla.