developer tip

input [type = 'text'] CSS 선택기가 기본 유형 텍스트 입력에 적용되지 않습니까?

copycodes 2020. 11. 24. 08:08
반응형

input [type = 'text'] CSS 선택기가 기본 유형 텍스트 입력에 적용되지 않습니까?


기본 입력 유형은 '텍스트'입니다. 나는 항상 CSS 선언 대상 input[type='text']이 컨트롤에 명시 적으로 선언되지 않은 경우에도 해당 입력에 영향을 미칠 것이라고 가정했습니다 . 그러나 내 기본 유형 텍스트 입력이 스타일을 얻지 못한다는 것을 방금 알았습니다. 왜 그렇습니까? 이 문제를 어떻게 해결할 수 있습니까?

input[type='text'] {
  background: red;
}
<input name='t1' type='text' /> /* Is Red */
<input name='t1' /> /* Is Not Red */


CSS는 DOM 트리의 데이터 만 사용하며, 이는 렌더러가 속성이 누락 된 요소로 수행 할 작업을 결정하는 방법과 거의 관련이 없습니다.

따라서 CSS가 HTML을 반영하도록하십시오.

input:not([type]), input[type="text"]
{
background:red;
}

또는 HTML을 명시 적으로 만드십시오.

<input name='t1' type='text'/> /* Is Not Red */

그렇게하지 않았다면 절대 구별 할 수 없었을 것입니다.

element { ...properties... }

element[attr] { ...properties... }

모든 속성은 항상 모든 요소에 정의되기 때문입니다. (예를 들어, table항상 기본값 인 border속성이 0있습니다.)


CSS 사양에 따라 브라우저는 기본 속성에 대한 정보를 사용하거나 사용하지 않을 수 있습니다. 대부분은하지 않습니다. CSS 2.1 사양의 관련 절은 5.8.2 DTD의 기본 속성 값입니다 . CSS 3 Selectors에서는 같은 이름의 6.3.4입니다. 권장 사항 : "문서 트리에 기본값이 포함되어 있는지 여부에 관계없이 작동하도록 선택기를 설계해야합니다."

일반적으로 필수 속성 type=text을 기본값 으로 지정하는 대신 명시 적으로 지정하는 것이 가장 좋습니다 . 그 이유는 input기본 type속성이 있는 요소 를 참조하는 간단하고 신뢰할 수있는 방법이 없기 때문입니다.


왜냐하면 그것은 그렇게 해서는 안되기 때문입니다.

input[type=text] { } 속성 선택기이며 일치하는 속성이있는 해당 요소 만 선택합니다.


모든 브라우저를 준수하려면 항상 입력 유형을 선언해야합니다.

일부 브라우저는 기본 유형을 '텍스트'로 가정하지만 이는 좋은 방법이 아닙니다.


이 시도

 input[type='text']
 {
   background:red !important;
 }

참고 URL : https://stackoverflow.com/questions/9603876/inputtype-text-css-selector-does-not-apply-to-default-type-text-inputs

반응형