Как я могу сделать окно для текста, пригодного для контента?

Question

Я использую контент на своих веб-страницах. Это прекрасно работает, но браузер активирует уродливую рамку вокруг редактируемого раздела. Кроме того, некоторые из этих границ не стираются, когда фокус изменяется на другой элемент на странице.

Safari создает светло-голубую границу, Firefox использует тонкую черную линию, поэтому здесь используется некоторая интерпретация браузера.

Я попытался явно установить границу для редактируемых разделов на none и сделать это свойство CSS важным, но это не меняет поведение браузера.

Мой вопрос:

Есть ли способ повлиять на укладку элемента страницы, который отменяет свойство границы, когда пользователь нажал внутри него, чтобы начать редактирование?

Answer 1

Попробуйте добавить контур: none в css для элементов формы, чтобы удалить свойство выделения выделения границы: none в css для элементов ввода.

Например:

input:focus{ 
     outline:none; 
    } 

    textarea:focus{ 
     outline:none; 
    } 

    select:focus{ 
     outline:none; 
    } 

Для рабочего кода найти Jsfiddle link

Answer 2

Добавить этот стиль (JsFiddle):

[contenteditable="true"]:active, [contenteditable="true"]:focus 
{ 
    border:none; 
    outline:none; 
} 

Для того, чтобы все contenteditable элементы не использовать границы и контуры когда фокусы.

EDIT: Я нашел отличный tutorial

Answer 3

[contenteditable="true"]:active, 
[contenteditable="true"]:focus 
{ 
border:none !important; 
outline:none !important; 
}