HTML에서 포커스는 "포커스"를 의미합니다. ":focus" 선택자는 포커스를 받은 요소를 선택하는 데 사용됩니다. 요소에 "element:focus{attribute:attribute value}" 스타일을 설정하기만 하면 됩니다. ":focus"는 포커스가 있는 요소에 적용되는 의사 클래스입니다. 선택자는 요소에 포커스가 있는 동안 적용됩니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
: 포커스 선택기는 포커스를 받는 요소를 선택하는 데 사용됩니다.
:focus는 포커스가 있는 요소에 적용되는 의사 클래스입니다.
:focus는 요소에 포커스가 있는 시간에 적용됩니다.
:focus 선택기는 키보드 이벤트나 기타 사용자 입력을 받을 수 있는 요소라면 사용할 수 있습니다. 대부분의 경우 :focus 선택기는 링크 및 양식 요소에 사용됩니다.
예:
a:focus {outline: 1px dotted red;} input:focus {background: yellow;}
참고: :focus는 IE8에서 작동하며 DOCTYPE을 선언해야 합니다.
예:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> input:focus { outline: 0; /* 去除浏览器默认样式 */ border: 2px solid rgb(238, 175, 238); background-color: rgb(255, 230, 192); text-shadow: 1px 1px saddlebrown; } </style> </head> <body> <p>点击文本输入框表单可以看到紫色边框和橘色背景:</p> <form> 用户名: <input type="text" name="username" /><br /> 密 码: <input type="password" name="password" /> </form> </body> </html>
Rendering:
지침:
일반적인 상황에서 브라우저는 자동으로 양식 요소 추가를 얻습니다. 브라우저에서 추가한 스타일은 각 브라우저의 기본 스타일이며, 기본 스타일은 브라우저마다 다르게 나타나는 경우가 많습니다.
그러나 페이지의 전반적인 아름다움과 브라우저 스타일 호환성을 위해 요소에 포커스가 있을 때 요소의 스타일을 수정하고 기본 스타일을 우리만의 스타일로 바꿔야 하는 경우가 많습니다.
이제 CSS :focus 선택기를 사용하여 브라우저가 포커스를 받을 때 요소의 기본 스타일을 설정할 수 있습니다.
추천 학습: html 비디오 튜토리얼
위 내용은 HTML에서 포커스는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!