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

다른 곳을 클릭하면 테두리가 사라지고 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);
}

스 니펫 확장