Comment avez-vous style contentEditable dans Firefox?

J'ai le texte suivant:

<div contenteditable="true">Item 2</div>

Dans webkit, je peux facilement ce style avec css. Firefox est ignorant de la css, et de faire de la contenteditable div blanc et redimensionnable.

Comment puis-je modifier le css pour contentEditable dans Firefox. Je veux que le fond soit transparent et de désactiver le redimensionnement, et la poignée de redimensionnement de la barre.

Grâce

InformationsquelleAutor AnApprentice | 2011-10-26
  1. 11

    Vous pouvez faire correspondre la div avec ce code

    div[contenteditable=true] {
   background: rgba(0,0,0,0); /* transparent bg */
   resize:none; /* disable resizing */
}
    • Qui travaille dans webkit pas firefox?
    • dans firefox 7 puis-je style que je veux mais je ne sais pas comment faire pour supprimer liséré rouge sur les mauvais mots.
    • Sélecteur d'attribut sont définis dans CSS2, donc, il faut travailler. Quelle est la version de Firefox avez-vous?
    • Je suis dans FF8.. u?
    • Toujours pas de chance, j'ai même essayé: div[contenteditable=true]:focus --- comme il ne se produit que lorsque je clique dans
    • Quand je clique, je vois _moz_resizing="true" sur le div. c'est ça le problème. Comment puis-je me débarrasser de ça?

    InformationsquelleAutor Simone
  2. 6
    div[contenteditable="true"] {
    /* your style here */
}

    simone réponse a été la plupart du temps correct sauf il faut des guillemets autour de "vrai" dans [contenteditable="true"]

    InformationsquelleAutor harveyxia
  3. 3

    S'avère que si vous utiliser position:absolute FF auto ajoute resizers et une prise de gestionnaire et de l'arrière-plan est blanc. Vous ne pouvez pas remplacer ces paramètres, ainsi que la resizers. Un autre -1 pour les FF.

    • gros -1 pour les FF, donc... aucune solution à ce jour? J'ai essayé avec jQuery: $('#target').removeAttr('_moz_abspos').removeAttr('_moz_resizing') Mais alors #target n'est pas modifiable.
    InformationsquelleAutor AnApprentice
  4. 0
    div[contenteditable] {
   background: white;
}
    InformationsquelleAutor chovy
  5. 0

    Lors de la substitution des styles pour un contentEditable panneau, le sélecteur css, j'ai trouvé que firefox a été l'ajout d'un css-sélectionnable "focus-ring" à la racine de mes contentEditable nœud

    :-moz-focusring:not(input):not(button):not(select):not(textarea):not(iframe):not(frame):not(body):not(html) { outline: 1px dotted;}

    Essayer des variantes de:

    -moz-focusring or -moz-focusring[contentEditable='true']

    Vous pouvez ladite styles:

    background: rgba(0,0,0,0); 
resize:none;

    Mais, vous devrez peut-être firebug la recherche de l'-moz spécifiques redimensionner paramètre pour désactiver.

    De croix-navigateur de la feuille de style de tests, il suffit de parcourir à ce test de données url:

    data:text/html,<div style='position:absolute;left:100;top:50;width:200;height:300;background-color:rgb(50,50,80)'><div contenteditable>Test<br/>Test </div></div> <style contenteditable>head, title, style {display: block;} :-moz-focusring{background: transparent}</style>
    InformationsquelleAutor Ajax
  6. -1

    Un arrière-plan transparent gif ou png devrait faire l'affaire

    InformationsquelleAutor Ralph Vaz