Meilleure façon de styliser une TextBox en CSS

J'aimerais savoir quelle est la meilleure chose à faire avec de la pure CSS.

La Situation:

Je vais avoir une zone de texte dans laquelle je peux rechercher des éléments spécifiques. Encore maintenant, je suis aussi d'avoir une recherche avancée avec presque la même zone de texte encore la largeur de la advancedSearchTextbox est inférieure à la valeur par défaut.

Ma Question

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

Ma Solution

J'ai corrigé 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;
}

et puis dans le HTML, il regarde quelque chose comme ça pour le advancedSearchTextbox:

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

Est-ce la meilleure façon de le faire? Ou existe-il d'autres options? Pour seulement 1 autre zone de texte c'est possible mais que faire si j'ai besoin de zones de texte plus que sur les autres pages?

Merci d'avance :)!

source d'informationauteur Baklap4

  1. 15

    Vous pourriez cible toutes les zones de texte avec input[type=text] puis définir explicitement la classe pour les zones de texte qui en ont besoin.

    Votre CSS devient:

    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;
}

    HTML:

    <input type="text" class="advancedSearchTextBox" />
  2. 2

    votre approche est bon prety... 

     .myclass {
        height: 20px;
        position: relative;
        border: 2px solid #cdcdcd;
        border-color: rgba(0,0,0,.14);
        background-color: AliceBlue ;   ;
        font-size: 14px;
    }

    Code HTML :

    <input type="text" class="myclass" />
  3. 2

    Vous Aussi vous voulez mettre un peu de texte (espace réservé) dans le vide de la zone de saisie pour l'utilisateur de comprendre ce type. 

    //html
 <input type="text" class="myClass" id="fname" placeholder="Enter First Name Here!">

//css
.myClass{

::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
}
  4. 1

    Vous pouvez utiliser:

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

    Définir votre commune attributs de style à l'intérieur. et pour plus de style, vous pouvez ajouter une classe alors.