zone de texte arrondie css

Question

J'ai trouvé ce code d'ici: http://www.cssportal.com/form-elements/text-box.htm Mais le problème est que vous pouvez toujours voir la forme rectangulaire de la zone de texte lorsque vous cliquez à l'intérieur. Quelle serait la solution pour cela? Alors que le point culminant sera l'image avec des coins arrondis

/* Rounded Corner */ 
.tb5 { 
    background: url(images/rounded.gif) no-repeat top left; 
    height: 22px; 
    width: 230px; 
} 
.tb5a { 
    border: 0; 
    width:220px; 
    margin-top:3px; 
} 

Answer 1

Cela ne devrait se produire dans certains navigateurs comme Google Chrome, il est destiné à aider à la facilité d'utilisation et l'accessibilité, mais il peut provoquer des problèmes avec un peu de style. Ce que vous voulez faire est de retirer la dynamic outlines comme ceci:

input[type="text"] { 
    outline: none; 
} 

En outre, vous pouvez essayer de mettre en évidence la zone de texte encore en incluant un changement d'image d'arrière-plan à l'aide d'un psedo sélecteur comme: se concentrer

input[type="text"]:focus { 
    background: url(images/rounded-focused.gif) no-repeat top left; 
}