web-dev-qa-db-fra.com

Changer la couleur de la bordure du texte saisi sans changer sa hauteur

Disons que j'ai une entrée de texte par défaut sans CSS

<input type="text" />

Je veux changer la couleur de sa bordure en rouge pour ajouter un style

<input type="text" style="border-color:red" />

Après cela, la bordure est rouge, mais sa taille est 2px. Si je modifie la bordure à 1 px, la hauteur de l'entrée sera inférieure à celle par défaut.

Comment puis-je changer ma bordure en 1 px et assurer que la hauteur réelle de l'entrée (y compris la bordure) est identique à celle par défaut?

htmlcssborder
8
user937450

utilisez ceci, cela n'affectera pas la hauteur:

<input type="text" style="border:1px solid #ff0000" />
21
Atif Azad

Essaye ça

<input type="text"/>

Il s'affichera de la même manière dans tous les navigateurs croisés, tels que Mozilla, Chrome et Internet Explorer.

<style>
    input{
       border:2px solid #FF0000;
    }
</style>

N'ajoutez pas de style en ligne car ce n'est pas une bonne pratique, utilisez class pour ajouter un style à votre zone de saisie

6
Devang Rathod

Définissez une bordure transparente, puis modifiez-la:

.default{
border: 2px solid transparent;
}

.new{
border: 2px solid red;
}
1
Michael Sazonov

Est-ce ce que vous recherchez.

$("input.address_field").on('click', function(){  
     $(this).css('border', '2px solid red');
});
1
Mayur Patil

Cette solution css a fonctionné pour moi:

input:active,
input:focus {
    border: 1px solid #red
}

input:active,
input:focus {
    padding: 2px solid #red /*for firefox and chrome*/
}

/* .ie is a class you would need to set at the html root level */
.ie input:active,
.ie input:focus {
    padding: 3px solid #red /* IE needs 1px extra padding*/
}

Je comprends que ce n’est pas nécessaire sous FF et Chrome, mais IE en a besoin. Et il y a des circonstances où vous en avez besoin.

0
Tarun