입력 버튼에서 외곽선 테두리를 제거하는 방법

입력 버튼에서 외곽선 테두리를 제거하는 방법

다른 곳을 클릭하면 테두리가 사라집니다.onfocus: none, 도움이 안 됐어요이 못생긴 단추 테두리를 클릭하면 사라지는 방법은?

input[type=button] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

사용.outline: none;크롬으로 테두리를 제거할 수 있습니다.

<style>
input[type=button] {
    width: 120px;
    height: 60px;
    margin-left: 35px;
    display: block;
    background-color: gray;
    color: white;
    border: none;
    outline: none;
}
</style>

Chrome 및 FF에서 개요 집중:

제거된 버튼 포커스 윤곽선:

button,
input[type=button] {
  outline: none;
}
button::-moz-focus-inner,
input[type=button]::-moz-focus-inner {
  border: 0;
}

/*
  Accessibility (A11Y)
  Don't forget! User accessibility is important
*/
button:focus,
input[type=button]:focus {
  /* your custom focused styles here */
} 

저한테는 간단하게 효과가 있어요 :)

*:focus {
    outline: 0 !important;
}

둘 다 설정합니다.outline그리고.box-shadow단추 속성:none그들을 중요하게 만들겁니다.

input[type=button] {
    outline: none !important;
    box-shadow: none !important;
} 

The reason for setting the values to **important** is that, if you are using other CSS libraries or frameworks like Bootstrap, it might get overridden.

이거 나한테 잘 맞았거든요.

button:focus {
    border: none;
    outline: none;
}

그outline재산이 당신에게 필요한 것입니다.단일 선언에서 다음 속성을 각각 설정하는 것을 축약합니다.

• outline-style
• outline-width
• outline-color

당신은 사용할 수 있습니다.outline: none;, 그것은 수용된 답변에서 제시된 것입니다.원하는 경우 보다 구체적으로 설명할 수도 있습니다.

button {
    outline-style: none;
}

button:focus{outline:none !important;}

더하다!important부트스트랩에 사용되는 경우

포커스에서 아웃라인 속성을 변경할 때 발생하는 문제를 방지하려면 사용자가 입력 버튼을 탭하거나 클릭할 때 시각적 효과를 부여합니다.

이 경우는 제출 형식이지만 type="버튼"에도 신청할 수 있습니다.

input[type=submit]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

아래의 html을 고려할 때:

<button class="btn-without-border"> Submit </button>

CSS 스타일에서는 다음을 수행합니다.

.btn-without-border:focus {
    border: none;
    outline: none;
}

이 코드는 단추 테두리를 제거하고 단추를 클릭하면 단추 테두리 초점을 비활성화합니다.

다른 많은 사람들이 언급했듯이,selector:focus {outline: none;}테두리는 제거되지만 테두리는 키보드 사용자가 단추를 찾을 수 있는 주요 접근성 기능이므로 제거해서는 안 됩니다.

고민이 미적인 부분인 것 같기 때문에, 윤곽의 색상, 스타일, 폭을 변경하여 사이트 스타일링에 더 잘 맞을 수 있다는 것을 알아야 합니다.

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

속기:

selector:focus {
  outline: 1px dashed red;
}

생각보다 아주 간단합니다.버튼이 포커스를 맞추면 다음 버튼을 적용합니다.outline다음과 같은 속성:

button:focus {
    outline: 0 !important;
}

하지만 제가 사용할 때는.none가치가 있어요, 저한테는 안 돼요.

표준 웹 개발에서 접근 가능한 이벤트를 제거하는 것은 좋은 생각이 아닙니다.어느 쪽이든 윤곽만 제거하는 해결책을 찾더라도 문제가 해결되지는 않습니다.여러분은 또한 파란색 그림자를 제거해야만 합니다.특정 시나리오의 경우 별도의 클래스 이름을 사용하여 이 특수 스타일을 단추에 분리합니다.

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

이렇게 하는게 좋을거에요.

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

윤곽을 제거하는 것은 접근성의 악몽입니다.키보드로 탭을 하는 사람들은 자신이 어떤 항목에 있는지 절대 알 수 없을 것입니다.

대부분의 클릭된 단추는 어디론가 이동하거나 윤곽선을 제거해야 하는 경우 특정 클래스 이름을 분리하기 때문에 그대로 두는 것이 좋습니다.

.no-outline {
  outline: none;
}

그러면 필요할 때 언제든지 그 수업을 신청할 수 있습니다.

키보드를 사용할 때 윤곽을 복원하는 또 다른 방법은 다음을 사용하는 것입니다.:focus-visible. 그러나 IE:https://caniuse.com/ ?search=focus- visible에서는 작동하지 않습니다.

은도 outline: none둘 다 적용 가능합니다.<button>태그 및input[type=button]클릭 시 브라우저-applied 테두리를 제거합니다.

Chrome과 Mozilla가 버튼 주변뿐만 아니라 링크된 텍스트 주변에도 이 줄을 추가했기 때문에 저는 제 사이트에서 다음과 같이 사용합니다.

a:focus {outline: none;
}

브라우저, 링크 및 버튼 모두에 대해 작동합니다.

그건 그렇고, 이것은 (2021년 4월 27일) 하지 않았습니다.

input[type=button]{
   outline:none;
}
input[type=button]::-moz-focus-inner {
   border: 0;
}

언급URL : https://stackoverflow.com/questions/19886843/how-to-remove-outline-border-from-input-button