Bạn có thể tạo kiểu nội dung trong Firefox như thế nào?

Question

tôi có như sau:

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

Trong webkit tôi có thể dễ dàng phong cách này với css. Firefox bỏ qua css, và làm cho div trắng có thể chỉnh sửa và thay đổi kích thước.

Làm cách nào tôi có thể sửa đổi css cho contentEditable trong Firefox. Tôi muốn nền được minh bạch và để vô hiệu hóa thay đổi kích thước, và thanh điều khiển thay đổi kích thước.

Cảm ơn

Answer 1

Bạn có thể phù hợp với div với mã này

div[contenteditable=true] { 
    background: rgba(0,0,0,0); /* transparent bg */ 
    resize:none; /* disable resizing */ 
} 

Answer 2

div[contenteditable] { 
    background: white; 
} 

Answer 3

Hóa ra rằng nếu bạn sử dụng các mục: FF tuyệt đối tự động thêm resizers và một handler lấy và đặt nền để trắng . Bạn không thể ghi đè lên những seetings, cũng chỉ resizers. Một -1 cho FF.

Answer 4

Khi trọng phong cách cho một bảng điều khiển contentEditable, chọn css tôi thấy rằng firefox được thêm một css-lựa chọn "tập trung-ring" để rễ của tôi nút contentEditable

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

biến Cố gắng của:

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

Bạn có thể muốn phong cách nói trên:

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

Tuy nhiên, bạn có thể cần phải tìm kiếm các thông số thay đổi kích thước -moz cụ thể để vô hiệu hóa.

Đối với kiểm tra kiểu cross-trình duyệt, chỉ cần duyệt đến url dữ liệu thử nghiệm này:

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> 

Answer 5

Một gif nền trong suốt hoặc png nên làm các trick

Answer 6

div[contenteditable="true"] { 
    /* your style here */ 
} 

câu trả lời simone là chủ yếu đúng trừ cần phải có dấu ngoặc kép xung quanh "true" trong [contenteditable = "true"]