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

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

---

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

데모

추신:

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

---

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

*:focus {
    outline: 0 !important;
}

---

outline속성은 당신이 필요로하는 것입니다. 단일 선언에서 다음 속성을 각각 설정하는 방법입니다.

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

outline: none;수락 된 답변에서 제안되는을 사용할 수 있습니다 . 원하는 경우 더 구체적으로 지정할 수도 있습니다.

button {
    outline-style: none;
}

---

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

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

---

button:focus{outline:none !important;}

부트 스트랩!important 에서 사용되는 경우 추가

---

아래 html이 주어지면 :

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

css 스타일에서 다음을 수행하십시오.

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

This code will remove button border and will disable button border focus when the button is clicked.

---

Removing the outline is an accessibility nightmare. People tabbing using keyboards will never know what item they're on.

Best to leave it, as most clicked buttons will take you somewhere anyway, or if you HAVE to remove the outline then isolate it a specific class name.

.no-outline {
  outline: none;
}

Then you can apply that class whenever you need to.

---

As many others have mentioned, selector:focus {outline: none;} will remove that border but that border is a key accessibility feature that allows for keyboard users to find the button and shouldn't be removed.

Since your concern seems to be an aesthetic one, you should know that you can change the color, style, and width of the outline, making it fit into your site styling better.

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

Shorthand:

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

---

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

button:focus {
    outline: 0 !important;
}

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

---

포커스의 외곽 속성을 변경할 때 발생하는 문제를 피하기 위해 사용자가 입력 버튼을 탭하거나 클릭 할 때 시각적 인 효과를주는 것입니다.

이 경우 제출 유형이지만 type = "button"에도 적용 할 수 있습니다.

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

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