HTML에서 포커스는 무엇을 의미합니까?
- 醉折花枝作酒筹원래의
- 2021-06-03 16:27:179106검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!