Largeur d'entrée définis au niveau css et au niveau de l'élément

<style>

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

</style>
<body>

<input type="text" name="test" value="test" size="5" />
</body>

Lorsqu'elle est perçue sur navigateur (Firefox 5), la "taille", il apparaît fixe 200px. Il semble que la taille, j'ai spécifié est complètement ignoré.

C'est à partir d'un projet MVC, et qui est la valeur par défaut de style css qui vient avec elle. Pour le moment, j'ai pris le width: 200px. Mais est-il un moyen de l'y maintenir, et de le remplacer à la "entrée"?

J'ai aussi essayé

<input type="text" name="test" value="test" width="50px" />

Il n'avait pas renoncé à tous.

OriginalL'auteur DevSharp | 2011-08-07

  1. 19

    Si vous souhaitez remplacer le CSS largeur au niveau de l'élément, essayez d'appliquer le style de la balise de l'élément directement:

    <input type="text" name="test" value="test" style="width: 50px;" />

    Cela fonctionne pour moi:

    <html>
   <style>

      input[type="text"] 
      {
         width: 200px;
         border: 1px solid #CCC;
      }
</style>
<body>
      <input type="text" name="test" value="test" style="width: 50px;" />
</body>
</html>

    Modifiées afin d'Ajouter:

    Oui, le mélange HTML w/CSS est considéré comme un pas-à-pas, de sorte que le bon solution serait d'extraire une classe à la fin:

    .my_text_box {
    width: 50px;
 }

    Alors:

    <input type="text" name="test" value="test" class="my_text_box" />
    Merci, cela devrait faire l'affaire.

    OriginalL'auteur Evan

  2. 3

    De ne pas définir l'affichage style dans le code HTML.

    Utilisation:

    <input class="narrowInput" type="text" name="test" value="test" />

    Ou:

    <input id="narrowInput" type="text" name="test" value="test" />

    Seulement n'utilisez pas "narrowInput". Utilisez un nom qui a un sens économique, c'est: celui qui décrit le but de la saisie des données.

    Puis le CSS est:

    input.narrowInput
{
    width: 50px;
}

    Ou:

    #narrowInput
{
    width: 50px;
}

    OriginalL'auteur Brock Adams

  3. 0

    Supprimer soit 

    input[type="text"] 
{
    width: 200px; //THIS
}

    ou

    <input type="text" name="test" value="test" size="5" <--//THIS />

    Choisissez de style à l'aide de l'un ou de l'autre.

    OriginalL'auteur Jason Gennaro