입력 텍스트 요소에서 테두리 강조 표시를 제거하는 방법

programing

입력 텍스트 요소에서 테두리 강조 표시를 제거하는 방법

mailnote 2023. 5. 31. 18:22

입력 텍스트 요소에서 테두리 강조 표시를 제거하는 방법

HTML 요소가 '초점'(현재 선택/탭 위치)이면 많은 브라우저(최소한 Safari 및 Chrome)가 해당 요소 주위에 파란색 테두리를 둘 것입니다.

제가 작업하고 있는 레이아웃의 경우, 이것은 산만하고 올바르게 표시되지 않습니다.

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox는 이 작업을 수행하지 않는 것 같습니다. 적어도 다음을 사용하여 제어할 수 있습니다.

border: x;

만약 누군가 IE가 어떻게 하는지 말해줄 수 있다면, 저는 궁금할 것입니다.

사파리에게 이 작은 플레어를 제거하게 하는 것이 좋을 것입니다.

이 작업을 수행하기 전에 포커스 개요는 접근성 및 사용성 기능입니다. 포커스 개요는 사용자에게 현재 어떤 요소에 초점을 맞추고 있으며 많은 사용자가 이 기능에 의존하고 있는지 알려줍니다.초점을 가시화할 수 있는 다른 방법을 찾아야 합니다.

이 경우 다음을 시도합니다.

input.middle:focus {
    outline-width: 0;
}

또는 일반적으로 모든 기본 폼 요소에 영향을 미치려면 다음을 수행합니다.

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

코멘트에서 노아 휘트모어는 이것을 더 나아가서 다음과 같은 요소들을 지원할 것을 제안했습니다.contenteditable으로 설정된 true(효과적으로 입력 요소의 유형으로 만듭니다.)다음은 (CSS3 지원 브라우저에서) 이러한 것들도 마찬가지입니다.

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

완전성을 위해 권장하지는 않지만, 다음과 같이 모든 것에 대한 포커스 아웃라인을 항상 비활성화할 수 있습니다.

*:focus {
    outline: none;
}

모든 입력에서 제거하려면 다음과 같이 하십시오.

input {
 outline:none;
}

이것은 제가 그 선이 경계선도 윤곽도 아닌 그림자라는 것을 발견하기 전까지 한동안 저를 혼란스럽게 했습니다.그래서 제거하기 위해서는 다음을 사용해야 했습니다.

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

이것은 오래된 스레드이지만, 참조를 위해 입력 요소의 개요를 비활성화하는 것은 접근성을 방해하기 때문에 권장되지 않습니다.

아웃라인 속성은 키보드 포커스를 사용자에게 명확하게 표시하는 이유가 있습니다.이 주제에 대한 자세한 내용 및 추가 자료는 http://outlinenone.com/ 를 참조하십시오.

이는 일반적인 문제입니다.

브라우저가 렌더링하는 기본 윤곽선은 보기 흉합니다.

다음 예를 참조하십시오.

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

"은 "해결책"입니다.outline:none잘못 사용하면 접근성이 저하됩니다.

그럼... 개요가 무슨 소용이 있겠어요?

제가 찾은 아주 세련된 웹사이트가 있는데 모든 것을 잘 설명해 줍니다.

TAB 키 또는 동등한 키를 사용하여 웹 문서를 탐색할 때 "초점"이 있는 연결에 대한 시각적 피드백을 제공합니다.이것은 특히 마우스를 사용할 수 없거나 시각 장애가 있는 사람들에게 유용합니다.아웃라인을 제거하면 해당 사용자가 사이트에 액세스할 수 없게 됩니다.

자, 위와 같은 예를 사용해 보겠습니다. 이제 다음을 사용합니다.TAB탐색 키를 누릅니다.

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

입력을 클릭하지 않고도 초점이 어디에 있는지 알 수 있는 방법을 알고 계십니까?

자, 해보겠습니다.outline:none우리가 신뢰하는 바로는<input>

한 번▁the를 합니다.TAB키를 눌러 텍스트를 클릭한 후 이동하여 결과를 확인할 수 있습니다.

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

초점이 어디에 있는지 파악하는 것이 얼마나 더 어려운지 아십니까?유일한 표시는 커서가 깜박이는 것입니다.위의 예는 지나치게 단순합니다.실제 상황에서는 페이지에 하나의 요소만 표시되지 않습니다.이것과 비슷한 것.

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

개요를 유지할 경우 동일한 템플릿과 비교해 보십시오.

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

그래서 우리는 다음을 확립했습니다.

윤곽이 보기 흉합니다.
그것들을 제거하는 것은 삶을 더 어렵게 만듭니다.

그래, 정답이 무엇이냐?

보기 흉한 윤곽선을 제거하고 초점을 나타내기 위해 자신만의 시각적 단서를 추가합니다.

여기 제가 의미하는 것에 대한 아주 간단한 예가 있습니다.

윤곽선을 제거하고 :focus 및 :active에 아래쪽 테두리를 추가합니다.또한 위쪽, 왼쪽 및 오른쪽의 기본 테두리를 :focus 및 :active(개인 기본 설정)에 투명하게 설정하여 제거합니다.

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

따라서 위의 접근 방식을 이전의 "실제" 예로 사용해 보겠습니다.

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

이것은 Materialize와 같이 완전히 제거하는 것이 아니라 "아웃라인"을 수정하는 아이디어를 기반으로 하는 외부 라이브러리를 사용함으로써 더 확장될 수 있습니다.

당신은 못생기지 않고 아주 적은 노력으로 작동하는 것으로 끝날 수 있습니다.

body {
  background: #444
}

.wrapper {
  padding: 2em;
  width: 400px;
  max-width: 100%;
  text-align: center;
  margin: 2em auto;
  border: 1px solid #555
}

button,
.wrapper {
  border-radius: 3px;
}

button {
  padding: .25em 1em;
}

input,
label {
  color: white !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />

<div class="wrapper">
  <form>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <button type="submit">Login</button>
  </form>
</div>

나에게 효과가 있었던 유일한 해결책은

국경은 사실 그림자입니다.그래서 그걸 숨기려면 이렇게 해야만 했습니다.

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

2021년 편집: 이제 사용할 수 있습니다. https://github.com/WICG/focus-visible

모든 포커스 스타일을 제거하는 것은 일반적으로 접근성과 키보드 사용자에게 좋지 않습니다.그러나 개요는 보기 흉하고 모든 대화형 요소에 맞춤형으로 초점을 맞춘 스타일을 제공하는 것은 정말 고통스러울 수 있습니다.

그래서 제가 찾은 가장 좋은 방법은 사용자가 키보드를 사용하여 탐색하는 것을 감지할 때만 개요 스타일을 표시하는 것입니다.기본적으로 사용자가 TAB를 누르면 개요가 표시되고 마우스를 사용하면 숨깁니다.

일부 요소에 대한 사용자 정의 포커스 스타일을 작성하는 것을 막지는 않지만 적어도 양호한 기본값을 제공합니다.

이렇게 해야 합니다.

// detect keyboard users

const keyboardUserCssClass = "keyboardUser";

function setIsKeyboardUser(isKeyboard) {
  const { body } = document;
  if (isKeyboard) {
   body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
  } else {
   body.classList.remove(keyboardUserCssClass);
  }
}

// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
  if (e.key === "Tab") {
   setIsKeyboardUser(true);
  }
});
document.addEventListener("click", e => {
  // Pressing ENTER on buttons triggers a click event with coordinates to 0
  setIsKeyboardUser(!e.screenX && !e.screenY);
});

document.addEventListener("mousedown", e => {
  setIsKeyboardUser(false);
});

body:not(.keyboardUser) *:focus {
  outline: none;
}

<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>

`:focus-visible`

접근성에 대한 좋은 소식 - Chrome & Firefox에 대한 지원 추가:focus-visible.

내게 필요한 옵션(키보드 탐색) 때문에 포커스 스타일을 숨기는 것은 웹 사이트에 대한 액세스를 줄이는 좋지 않은 방법입니다.

사용하다:focus-visible유사 클래스 및 브라우저가 포커스를 적용할 시기를 결정하도록 합니다.

:focus-visible /* Chrome */

Firefox는 이전의 접두사 유사 클래스를 통해 유사한 기능을 지원합니다.

:-moz-focusring /* Firefox */

button {
  color: #000;
  background-color: #fff;
  padding: 10px 16px;
  margin: 10px 0;
  border-radius: 4px;
}

button:focus {
  box-shadow: 0 0 0 2px #E59700;
  outline: 0;
}

button:hover {
  background-color: #eee;
}

button.with-focus-visible:focus:not(:focus-visible) {
  box-shadow: none;
  outline: 0;
}

button.with-focus-visible:focus-visible, 
button.with-focus-visible:moz-focusring {
  box-shadow: 0 0 0 2px #E59700;
  outline: 0;
}

<p>Click on the button using a mouse. Then try tabbing to the button.</p>
<button>without :focus-visible</button>
<button class="with-focus-visible">with :focus-visible</button>

문서: https://developer.mozilla.org/en-US/docs/Web/CSS/ : e-메일 주소: e-메일 주소

w3 사양: https://www.w3.org/TR/selectors-4/ #더-디-디-디-디-디-디-디-디-디-디-디-디

저는 모든 답을 시도했지만 여전히 제 답을 모바일에서 사용할 수 없었습니다.-webkit-tap-highlight-color.

그래서, 제게 효과가 있었던 것은...

* { -webkit-tap-highlight-color: transparent; }

CSS를 사용하여 비활성화할 수 있습니다!파란색 테두리를 비활성화하는 데 사용하는 코드는 다음과 같습니다.

*:focus {
    outline: none;
}

다음은 실제 사례입니다.

다음 코드 사용:

input:focus {
    outline: 0;
}

테두리 윤곽선을 제거하는 부트스트랩 4에서 사용할 수 있습니다.shadow-none포커스 아웃라인이 제거됩니다.

            <div class="form-group">
                <label for="exampleInputEmail1">Name</label>
                <input type="text" class="form-control form-control shadow-none" 
                id="exampleInputEmail1"aria-describedby="emailHelp">
            </div>

포커스가 있는 텍스트 영역에는 상자 그림자가 있을 수 있습니다.다음과 같이 제거할 수 있습니다.

textarea:focus{
    outline: none!important;
    box-shadow: none!important;
}

이것도 시도해 보세요.

input[type="text"] {
outline-style: none;
}

또는

.classname input{
outline-style: none;
}

파이어폭스에서는 어떤 솔루션도 작동하지 않았습니다.

다음 솔루션은 Firefox의 경우 테두리 스타일을 포커스로 변경하고 다른 브라우저의 경우 테두리를 없음으로 설정합니다.

초점 테두리를 3px 파란색에서 텍스트 영역 테두리와 일치하는 테두리 스타일로 효과적으로 만들었습니다.다음은 테두리 스타일입니다.

점선 테두리(경계 2px 빨간색 점선):

국경 없음! (경계 0px):

텍스트 영역 테두리(경계 1px 실선 회색):

코드는 다음과 같습니다.

input:focus, textarea:focus {
    outline: none; /** For Safari, etc **/
    border:1px solid gray; /** For Firefox **/
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>

아웃라인:없음을 사용하여 텍스트/입력 상자 주변의 주황색 또는 파란색 테두리(아웃라인)를 제거할 수 있습니다.

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}

이 css를 사용해보세요, 저에게 효과가 있습니다.

textarea:focus, input:focus{ border: none; }

아래 CSS 속성을 사용하여 요소에 포커스가 있을 때 아웃라인을 제거합니다.

input:focus {
    outline: 0;
}

이 CSS 속성은 포커스에 있는 모든 입력 필드의 윤곽선을 제거하거나 의사 클래스를 사용하여 아래의 CSS 속성을 사용하여 요소의 윤곽선을 제거합니다.

.className input:focus {
    outline: 0;
}

이 속성은 선택한 요소의 윤곽선을 제거합니다.

사용해 보십시오.

*:focus {
    outline: none;
}

이는 모든 페이지에 영향을 미칩니다.

위의 솔루션이 작동하지 않는 경우 부트스트랩을 사용하고 있을 수 있으므로.form-control수업이 신청 중입니다.box-shadow기본적으로 입력 필드에 대한 css 속성입니다.

해결책은 다음과 같습니다.

.form-control {
    box-shadow: none;
}

실제로 사용하면 안 됩니다.outline: none왜냐하면 누군가가 고정밀 뷰를 사용하고 있다면 어두운 배경에서 상태 변화를 볼 수 없기 때문입니다.대신 다음을 사용해야 합니다.

outline-color: transparent;

언급URL : https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element

'programing' 카테고리의 다른 글

신속한 선택적 이스케이프 클로저 매개변수 (0)	2023.05.31
JR Uby on Rails vs.루비 온 레일즈, 뭐가 달라요? (0)	2023.05.31
Windows 배치: 줄 바꿈 없이 에코 (0)	2023.05.31
Git 사용 시 "Error: bad index – Fatal: index file corrupt" 해결 방법 (0)	2023.05.31
iPhone: 마지막 화면 터치 이후 사용자 비활성/유휴시간 (0)	2023.05.26

현재글입력 텍스트 요소에서 테두리 강조 표시를 제거하는 방법

각종 프로그래밍 정보를 다루는 블로그입니다.

ASP.NET, Android, c, python, AngularJS, reactjs, MariaDB, MySQL, Oracle, GIT, JSON, spring-boot, wpf, WordPress, sql-server, powershell, MongoDB, jquery, Excel, ajax,

Today :
Yesterday :

mailnote

입력 텍스트 요소에서 테두리 강조 표시를 제거하는 방법

입력 텍스트 요소에서 테두리 강조 표시를 제거하는 방법

이는 일반적인 문제입니다.

그럼... 개요가 무슨 소용이 있겠어요?

그래, 정답이 무엇이냐?

`:focus-visible`

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

입력 텍스트 요소에서 테두리 강조 표시를 제거하는 방법

입력 텍스트 요소에서 테두리 강조 표시를 제거하는 방법

이는 일반적인 문제입니다.

그럼... 개요가 무슨 소용이 있겠어요?

그래, 정답이 무엇이냐?

:focus-visible

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바

`:focus-visible`