하이퍼링크나 버튼을 클릭할 때 나타나는 점선 테두리 제거
- 巴扎黑원래의
- 2017-04-05 16:54:011948검색
프런트 엔드 제작 과정에서 일부 텍스트/그림 링크 또는 일부 입력 컨트롤을 클릭하면 점선 테두리가 표시됩니다. 일반적으로 Firefox 및 IE 브라우저에는 점선 테두리가 표시되지만 Google에서는 표시되지 않습니다.
이러한 점선 테두리는 마우스를 사용하지 않고 키보드 Tab 키를 사용하여 페이지를 탐색할 때 쉽게 탐색할 수 있도록 현재 링크 또는 컨트롤의 위치가 표시됩니다. 이는 시각 장애가 있는 사람들에게는 더욱 중요합니다.
하지만 때로는 브라우저가 점선 상자를 다르게, 불규칙하게 해석하여 시각적 디자인에 결함이 되기 때문에 사용하고 싶지 않습니다. 그래서 이번에는 시청자의 시각적 즐거움이 완벽할 수 있도록 이러한 점선 테두리를 비활성화하고 싶습니다.
순수 CSS는 하이퍼링크나 버튼을 클릭할 때 나타나는 점선 테두리를 제거합니다
<style type="text/css">
a,input,button{ outline:none; }
::-moz-focus-inner{border:0px;}
</style>
</head>
<body>
<a href="http://www.admin10000.com" target="_blank"><img src="http://www.admin10000.com/skin/logo.jpg" border="0"></a>
<a href="http://www.admin10000.com" target="_blank">admin10000.com</a>
<input type="button" value="admin10000.com"/>
<button>admin10000.com</button>
</body>
위 코드에서 볼 수 있듯이 CSS 속성 개요를 설정하면 문제를 해결할 수 있습니다.
FF에는 입력 및 버튼 태그가 private 속성::-moz-focus-inner를 통해 특별히 처리되는 버그가 있습니다.
위의 방법은 IE6 및 IE7에서는 유효하지 않습니다. 다음과 같이 onfocus 속성을 사용하여 해결할 수 있습니다.
jquery 방법을 사용하려면 한 문장만 필요하며 매우 간단하고 모든 브라우저를 지원합니다
$("a,input,button").focus(function(){this.blur()});
위 내용은 하이퍼링크나 버튼을 클릭할 때 나타나는 점선 테두리 제거의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!