CSS의 입력 버튼에서 원하지 않는 테두리를 제거하는 방법은 무엇입니까?

입력 버튼에서 원치 않는 테두리 제거

웹사이트와 상호작용할 때 사용자는 데이터 제출을 위한 상호작용 요소 역할을 하는 입력 버튼을 자주 접하게 됩니다. 또는 조치를 시작합니다. 그러나 이러한 버튼을 클릭하거나 초점을 맞추면 보기 흉한 테두리가 표시되는 경우가 있습니다.

CSS에서 개요 속성은 버튼 주위에 보이는 테두리를 만드는 역할을 합니다. 기본적으로 웹 문서의 요소에는 초점이 맞춰지면 점선 윤곽선이 표시됩니다. 입력 버튼의 경우 이 윤곽선이 특히 주의를 산만하게 할 수 있습니다.

해결책: 윤곽선 제거

원치 않는 테두리를 제거하려면 값을 없음으로 설정하여 개요 속성을 설정합니다. 방법은 다음과 같습니다.

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

예

이러한 스타일을 HTML 입력 버튼에 적용하면 클릭 또는 포커스 시 윤곽선이 제거되어 깨끗하고 원활한 사용자 환경을 유지할 수 있습니다. 경험:

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

Chrome 사용자를 위한 참고 사항

Chrome에서 외곽선을 사용하여 외곽선 테두리 제거: 없음; 재산이 충분하지 않을 수 있습니다. 이러한 경우 CSS의 추가 줄이 필요합니다.

-webkit-appearance: none;

둘 다 적용 개요: 없음; -웹킷 모양: 없음; Chrome 브라우저에 테두리가 표시되지 않도록 CSS에 속성을 추가하세요.

위 내용은 CSS의 입력 버튼에서 원하지 않는 테두리를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!