CSS 속성 선택기를 사용하여 양식 스타일 지정-CSS 튜토리얼-php.cn

Example

Output

집

웹 프론트엔드

CSS 튜토리얼

CSS 속성 선택기를 사용하여 양식 스타일 지정

Aug 26, 2023 pm 12:21 PM

CSS의 속성 선택기를 사용하여 특정 속성이 있는 HTML 요소에 스타일을 적용합니다. 속성 선택자에는 다음 규칙이 적용됩니다.

p[lang] - lang 속성이 있는 모든 단락 요소를 선택합니다.
p[lang="fr"] - lang 속성 값이 정확히 "fr"인 모든 단락 요소를 선택합니다.
p[lang~="fr"] - lang 속성 값에 "fr"이라는 단어가 포함된 모든 단락 요소를 선택합니다.
p[lang|="en"] - lang 속성 값이 완전히 "en"이거나 "en-"으로 시작하는 모든 단락 요소를 선택합니다.

다음은 CSS 속성 선택기를 사용하여 양식 스타일을 지정하는 코드입니다.

Example

Demonstration

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
body {
   font-family: &quot;Segoe UI&quot;, Tahoma, Geneva, Verdana, sans-serif;
}
input[type=&quot;text&quot;] {
   width: 300px;
   display: block;
   margin-bottom: 10px;
   background-color: rgb(195, 250, 247);
   font-size: 18px;
   padding: 15px;
   border: none;
}
input[type=&quot;submit&quot;] {
   padding: 10px;
   font-size: 18px;
   border: none;
   outline: none;
   background-color: rgb(75, 163, 16);
   color: white;
}
input[type=&quot;password&quot;] {
   width: 300px;
   padding: 10px;
   background-color: red;
   color: white;
   border: none;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Css attribute selector example&lt;/h1&gt;
&lt;form&gt;
&lt;label for=&quot;fname&quot;&gt;First name:&lt;/label&gt;&lt;br /&gt;
&lt;input type=&quot;text&quot; id=&quot;fname&quot; name=&quot;fname&quot; value=&quot;Ron&quot; /&gt;
&lt;label for=&quot;lname&quot;&gt;Last name:&lt;/label&gt;&lt;br /&gt;
&lt;input type=&quot;text&quot; id=&quot;lname&quot; name=&quot;lname&quot; value=&quot;Shaw&quot; /&gt;
&lt;label for=&quot;pass&quot;&gt;Password:&lt;/label&gt;&lt;br /&gt;
&lt;input type=&quot;password&quot; id=&quot;pass&quot; name=&quot;pass&quot; value=&quot;password&quot; /&gt;
&lt;input type=&quot;submit&quot; value=&quot;Submit&quot; /&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사