Supprimez tous les styles (bordure, éclat) de la zone de texte.

Question

Je veux supprimer les styles d'un textarea et le laisser tout blanc sans bordure ni éclat, si possible. J'ai essayé avec différents trucs trouvés ici sur SO, mais rien ne fonctionne (essayé avec FF et Chrome).

Alors, est-ce possible et si oui, comment faire ?

Ce que j'ai essayé jusqu'à présent :

textarea#story {
  // other stuff
  -moz-appearance:none;
  outline:0px none transparent;
}

textarea:focus, input:focus{
    outline: 0;
}

*:focus {
    outline: 0;
}

Answer 1

L'effet de brillance est très probablement contrôlé par le box-shadow. En plus d'ajouter ce que Pavel a dit, vous pouvez ajouter la propriété box-shadow pour les différents moteurs de navigateur.

textarea {
    border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    resize: none; /*remove the resize handle on the bottom right*/
}

Vous pouvez également essayer d'ajouter !important pour donner la priorité à ce CSS.

Answer 2

Si vous voulez supprimer TOUT :

textarea {
    border: none;
    background-color: transparent;
    resize: none;
    outline: none;
}

Answer 3

Essayez ceci :

textarea {
        border-style: none;
        border-color: Transparent;
        overflow: auto;
        outline: none;
      }

jsbin : http://jsbin.com/orozon/2/

Answer 4

Vous voulez un minimum textarea sans frontières, ou resize -Drag-ic.

Tant lorsqu'il n'est pas sélectionné que lorsqu'il est sélectionné focus .

---

C'est facile, mais vous devrez mettre à jour rows par l'intermédiaire de JS lorsque des nouvelles lignes sont ajoutées ou supprimées pendant la saisie du texte.

Voici le CSS

textarea, textarea:focus
{
    font-family: "roboto","Helvetica Neue",Helvetica,Arial,sans-serif; /* make your choice */
    font-size: 11px;                                                   /* make your choice */ 
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-apperarance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: none;
    padding: 0px;
    resize: none;
    width: 100%;
    overflow: hidden;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

pour que les choses continuent à fonctionner comme prévu, vous devez programmer et mettre à jour les éléments suivants textarea L'attribut de l'utilisateur rows au compte de \r\n dans le textarea contenu plus 1 lorsque le contenu est fixé et quand il est mis à jour (entrée utilisateur / autre)