Comment puis-je rendre le texte dans un textarea monospace lors de l'utilisation de Twitter Bootstrap?

J'ai le texte suivant textarea élément:

<form action="/checkit" method="get">
    <textarea class="field span8" id="textarea" name="user_input" 
        rows="20">{{default_data}}</textarea>

    <input type="submit" value="Checker">
</form>

J'ai commencé à utiliser bootstrap, mais ne peut pas travailler sur la meilleure façon de rendre le texte dans le textarea monospace.

  • À l'aide de CSS textarea {font-family:"Monospace";} si elle ne fonctionne pas alors assurez-vous il n'y a pas d'autre règle CSS qui le dépasse, sinon utiliser la !important de la valeur, de les utiliser avec prudence.
  • Je ne veux pas avoir de texte à espacement fixe dans tous les textareas, juste un.
  • les citations sont fausses, sauf si vous vous attendez à un système d'avoir une police avec le nom spécifique de type Monospace.
InformationsquelleAutor smithy | 2013-01-22
  1. 35

    Ajoutant ce qui suit à votre balise textarea doit travailler

     style="font-family:monospace;"

    ou sinon vous pouvez juste l'ajouter à votre css comme ceci

    #textarea{font-family:monospace;}
    • qui a travaillé à l'exception nécessaires à l'utilisation style="font-family:Monospace;" que par les commentaires ci-dessus.
    • content d'avoir pu aider. quelqu'un downvoted moi :/ Il pourrait ne pas être la meilleure correction puisque vous êtes censé séparer votre code dans le style, mais il fonctionne. Peut-être prendre une classe quelque chose comme "textareamono" et l'application que ce serait une meilleure idée sur le long terme.
    • vous avez fait une erreur mono-espace doit être de type monospace, j'ai fait un edit de ton post et upvoted il
    InformationsquelleAutor Jess
  2. 14

    Twitter Bootstrap ensembles de beaucoup de caractéristiques de style, et il n'est pas toujours trivial de les remplacer. Pour un élément spécifique, cependant, il est facile lorsque vous utilisez un assez spécifique sélecteur comme un sélecteur d'id. Dans votre cas, le textarea élément a id="textarea", de sorte que vous pouvez utiliser, par exemple,

    <style>
#textarea { font-family: Consolas, Lucida Console, monospace; }
</style>

    Vous pouvez dresser la liste de toutes les séquences de polices à espacement fixe dans l'ordre de préférence, mais de faire de la dernière entrée monospace (sans les guillemets) en dernier, parce qu'il signifie tomber en arrière dans le navigateur par défaut de police à espacement fixe.

    Qu'il n'est pas bon pour la convivialité de définir la police à espacement fixe dans textarea, sauf peut-être l'entrée attendue est le code informatique, des rangées de chiffres, ou d'un autre texte qui est adapté pour le monospace de rendu.

    • À mon avis, c'est le plus complet de répondre, ainsi, le meilleur.
    InformationsquelleAutor Jukka K. Korpela
  3. 2

    Dans le bootstrap, nous avons des styles: 

    input,
button,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

    Dans votre css, vous avez besoin de changer cela en:

    #textarea { 
font-family: monospace; 
}

    Donc avec l'id de votre textarea auront la priorité.

    InformationsquelleAutor Bryan Lewis