ฉันจะลบเส้นขอบรอบพรีที่เน้นเนื้อหาที่สามารถแก้ไขได้อย่างไร

เมื่อฉันตั้งค่าองค์ประกอบก่อนเป็นเนื้อหาที่สามารถแก้ไขได้และให้โฟกัสในการแก้ไขมันจะได้รับเส้นประรอบ ๆ องค์ประกอบที่ดูไม่ดี ไม่มีเส้นขอบเมื่อโฟกัสอยู่ที่อื่น
ฉันจะลบเส้นขอบนั้นได้อย่างไร

ขอบคุณ

javascript jquery contenteditable

— คริสตอฟเฟอร์
แหล่งที่มา

คำตอบ:

191

ตั้งค่าoutlineคุณสมบัติ0px solid transparent;การ คุณอาจต้องตั้งค่าเป็น:focusสถานะเช่น:

[contenteditable]:focus {
    outline: 0px solid transparent;
}

— มาริอุส
แหล่งที่มา

@Christoffer: outlineจะไม่ทำงานใน IE7 หรือต่ำกว่า ในเบราว์เซอร์เหล่านี้คุณต้องตั้งค่าhideFocusคุณสมบัติขององค์ประกอบเป็นtrueเช่น$('#myEl').get().hideFocus = true;

— Andy E

สำหรับการอ้างอิง:[contenteditable]:focus { outline: 0px solid transparent; }

— Alf Eaton

ขอบคุณทุกคน บันทึกวันนี้ ฉันเห็นเพียงโครงร่างบน Chrome Firefox และ IE11 ไม่แสดง

— nevf

คุณยังสามารถใช้outline: none

— Yves M.

Alf ความคิดเห็นของคุณควรถูกระบุว่าเป็นคำตอบ:>

— Shai UI

คุณยังสามารถเพิ่ม:read-writeคลาสหลอกให้กับองค์ประกอบสไตล์ที่แก้ไขได้

ตัวอย่างเช่น( jsFiddle ) :

.element:read-write:focus {
     outline: none;
}

อ่านเพิ่มเติมที่นี่ใน codrops

:read-writeเลือกหลอกชั้นได้รับการสนับสนุนใน Chrome, Safari และ Opera 14+ และบน iOS ได้รับการสนับสนุนที่มี-moz-คำนำหน้าใน Firefox :-moz-read-writeในรูปแบบ :read-writeเลือกไม่สนับสนุนใน Internet Explorer และบน Android

— มอร์โกร
แหล่งที่มา

อะไรคือความแตกต่างระหว่างสิ่งนี้กับ.element:focus?

— JJJ

ใช้กับตัวเลือกที่สามารถแก้ไขได้เท่านั้น

— morkro

ประโยชน์ใด ๆ ที่ใช้มากกว่านี้[contenteditable]:focus?

— Joel

ด้วย: เปิดใช้งานตัวเลือกหลอก

— Walle Cyril