집중적인 내용 편집 사전 영역의 테두리를 제거하려면 어떻게 해야 합니까?

집중적인 내용 편집 사전 영역의 테두리를 제거하려면 어떻게 해야 합니까?

콘텐츠 편집에 대한 사전 요소를 설정하고 편집을 위해 초점을 맞추면 주변에 점선 테두리가 표시되어 보기 좋지 않습니다.초점이 다른 곳에 있을 때는 국경이 없습니다.
그 테두리는 어떻게 제거할 수 있습니까?

감사해요.

속성을 다음으로 설정합니다.0px solid transparent;. 당신은 그것을 설정해야 할 수도 있습니다.:focus상태 또한 다음과 같습니다.

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

추가할 수도 있습니다.:read-write편집 가능한 pseudo-class to style 요소입니다.

예를 들어(jsFiddle):

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

코드롭에 대해서는 여기서 더 읽어보세요.

그:read-writeChrome, Safari, Opera 14+에서 Pseudo-class Selector를 지원하며 iOS에서도 지원됩니다.를 통해 지원됩니다.-moz-형식으로 Firefox의 접두사:-moz-read-write.그:read-writeInternet Explorer 및 Android에서는 Selector가 지원되지 않습니다.

교체 없이 내장된 포커스 스타일을 제거하지 마십시오. 이 기능은 마우스 없이 웹을 사용하는 수백만 명의 사용자에게 필수적입니다.

HTML 생활 표준(https://html.spec.whatwg.org/multipage/interaction.html#element-level-focus-apis) 의 이 주제에 대한 좋은 조언의 예:

[포커스 링을 숨기려면] :focus-visible 유사 클래스를 사용하여 'outline' 속성을 재정의하고, 포커스되는 요소를 표시하는 다른 방법을 제공합니다.다른 포커스 스타일을 사용할 수 없는 경우 키보드를 사용하여 주로 페이지를 탐색하는 사용자나 포커스 윤곽선을 사용하여 페이지를 탐색하는 사용자의 페이지 사용이 현저히 줄어듭니다.

예를 들어, 텍스트 영역 요소에서 윤곽선을 숨기고 노란색 배경을 사용하여 포커스를 표시하려면 다음을 사용할 수 있습니다.

textarea:focus-visible { outline: none; background: yellow; color: black; }

언급URL : https://stackoverflow.com/questions/2260782/how-do-i-remove-the-border-around-a-focused-contenteditable-pre