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

다른 곳을 클릭하면 테두리가 사라지고 onfocus를 시도했지만 도움이되지 않았습니다. 클릭하면 못생긴 버튼 테두리가 사라지는 방법은 무엇입니까?

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">

개요 사용 : 없음; 크롬에서 테두리를 제거 할 수 있습니다.

<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의 윤곽에 초점

제거됨 :

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

데모

접근성 (A11Y)

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

그것은 나를 위해 간단하게 작동합니다 :)

*:focus {
    outline: 0 !important;
}

이것은 나를 위해 일했습니다.

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 = "button"에도 적용 할 수 있습니다.

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

버튼 의 outline및 box-shadow속성을 모두로 설정 none하고 중요 하게 만드십시오 .

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

값을 중요 로 설정하는 이유는 부트 스트랩과 같은 다른 CSS 라이브러리 또는 프레임 워크를 사용하는 경우 재정의 될 수 있기 때문입니다.

생각보다 매우 간단합니다. 버튼에 초점이 맞춰지면 다음 outline과 같이 속성을 적용합니다 .

button:focus {
    outline: 0 !important;
}

하지만 none가치를 사용 하면 효과가 없습니다.

nessorry 액세스 가능 이벤트를 제거하는 것은 표준 웹 개발에서 좋은 생각이 아닙니다. 윤곽선 만 제거하는 솔루션을 찾고 있다면 문제가 해결되지 않습니다. 파란색 그림자도 제거해야합니다. 특정 시나리오의 경우 별도의 클래스 이름을 사용하여이 특수 스타일을 단추에 격리하십시오.

.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;
}

그런 다음 필요할 때마다 해당 클래스를 적용 할 수 있습니다.

아래 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;
}