Khi tôi đặt một phần tử trước thành có thể nội dung được và đặt tiêu điểm vào đó để chỉnh sửa, nó sẽ nhận được một đường viền chấm xung quanh trông không đẹp cho lắm. Đường viền không ở đó khi tiêu điểm ở một nơi khác.
Làm cách nào để xóa đường viền đó?
Cảm ơn
Câu trả lời:
Đặt thuộc outlinetính thành 0px solid transparent;. Bạn cũng có thể phải đặt nó ở :focustrạng thái, ví dụ:
[contenteditable]:focus {
outline: 0px solid transparent;
}[contenteditable]:focus { outline: 0px solid transparent; }
outline: none
Bạn cũng có thể thêm lớp :read-writegiả vào các phần tử kiểu có thể chỉnh sửa được.
Ví dụ ( jsFiddle ) :
.element:read-write:focus {
outline: none;
}Đọc thêm ở đây về codrops .
Bộ
:read-writechọn lớp giả được hỗ trợ trong Chrome, Safari, Opera 14+ và trên iOS. Nó được hỗ trợ với-moz-tiền tố trong Firefox trong biểu mẫu:-moz-read-write. Bộ:read-writechọn không được hỗ trợ trong Internet Explorer và trên Android.
.element:focus?
[contenteditable]:focus?
outlinesẽ không hoạt động trong IE7 trở xuống. Trong những trình duyệt này, bạn cần phải thiết lập cáchideFocusthuộc tính của phần tửtrue, tức là$('#myEl').get().hideFocus = true;