web-dev-qa-db-fra.com

Meilleure façon de styliser un TextBox en CSS

J'aimerais savoir quelle est la meilleure chose à faire avec du CSS pur.

La situation:

J'ai une zone de texte dans laquelle je peux rechercher des éléments spécifiques. Pourtant, maintenant, j'ai également une recherche avancée avec presque la même zone de texte, mais la largeur de la zone de recherche avancée est inférieure à celle par défaut.

Ma question

Quelle est la meilleure façon de styliser la zone de texte?

Ma solution

J'ai résolu cela maintenant comme ceci:

.defaultTextBox {
    padding: 0;
    height: 30px;
    position: relative;
    left: 0;
    outline: none;
    border: 1px solid #cdcdcd;
    border-color: rgba(0,0,0,.15);
    background-color: white;
    font-size: 16px;
}
.advancedSearchTextbox {
    width: 526px;
    margin-right: -4px;
}

puis dans le HTML, cela ressemblerait à quelque chose comme ceci pour le advancedSearchTextbox:

<input type="text" class="defaultTextBox advancedSearchTextBox" />

Est-ce la meilleure façon de le faire? Ou existe-t-il d'autres options disponibles? Quant à seulement 1 autre zone de texte, c'est faisable, mais que se passe-t-il si j'ai besoin de plus de zones de texte sur d'autres pages?

Merci d'avance :)!

htmlcsshtml5classcss3
10
Baklap4

Vous pouvez cibler toutes les zones de texte avec input[type=text], puis définissez explicitement la classe pour les zones de texte qui en ont besoin.

Vous pouvez coder comme ci-dessous:

input[type=text] {
  padding: 0;
  height: 30px;
  position: relative;
  left: 0;
  outline: none;
  border: 1px solid #cdcdcd;
  border-color: rgba(0, 0, 0, .15);
  background-color: white;
  font-size: 16px;
}

.advancedSearchTextbox {
  width: 526px;
  margin-right: -4px;
}
<input type="text" class="advancedSearchTextBox" />
16
Neograph734

votre approche est plutôt bonne ...

.myclass {
    height: 20px;
    position: relative;
    border: 2px solid #cdcdcd;
    border-color: rgba(0, 0, 0, .14);
    background-color: AliceBlue;
    font-size: 14px;
}
<input type="text" class="myclass" />
3
Baqer Naqvi

Vous voulez également mettre du texte (espace réservé) dans la zone de saisie vide pour le

.myClass {
   ::-webkit-input-placeholder {
    color: #f00;
  }
   ::-moz-placeholder {
    color: #f00;
  }
  /* firefox 19+ */
   :-ms-input-placeholder {
    color: #f00;
  }
  /* ie */
  input:-moz-placeholder {
    color: #f00;
  }
}
<input type="text" class="myClass" id="fname" placeholder="Enter First Name Here!">

l'utilisateur pour comprendre quoi taper.

2
user3123529

Vous pouvez utiliser:

input[type=text]
{
 /*Styles*/
}

Définissez vos attributs de style communs à l'intérieur. et pour plus de style, vous pouvez alors ajouter une classe.

2
Irfan TahirKheli