텍스트 입력 필드에 대한 CSS 선택기?

텍스트 입력 필드에 대한 CSS 선택기?

CSS 선택기를 사용하여 '텍스트' 유형의 입력 필드를 어떻게 대상으로 지정할 수 있습니까?

input[type=text]

또는 양식 내부의 텍스트 입력으로 제한합니다.

form input[type=text]

또는 ID가 있다고 가정하여 특정 형식으로 더 제한합니다.myForm

#myForm input[type=text]

주의: IE6에서는 지원되지 않으므로 IE6용으로 개발하려면 IE7.js(이장이 제안한 대로)를 사용하거나 모든 텍스트 입력에 클래스를 추가하십시오.

참조: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

---

속성 선택기로 기본 속성 값을 항상 선택할 수 있는 것은 아니므로 텍스트 입력이 렌더링되는 다른 마크업 사례를 포함하려고 시도할 수 있습니다.

input:not([type]), /* type attribute not present in markup */
input[type=""],    /* type attribute present, but empty    */
input[type=text]   /* type is explicitly defined as 'text' */

그러나 형식이 정의되었지만 잘못된 값을 가지고 있으며 형식="text"로 되돌아가는 경우에도 마찬가지입니다.이를 위해 알려진 다른 유형이 아닌 모든 입력을 선택할 수 있습니다.

input:not([type=button]):not([type=password]):not([type=submit])...

그러나 이 선택기는 상당히 우스꽝스러울 것이며 HTML에 새로운 기능이 추가되면서 가능한 유형의 목록이 증가하고 있습니다.

주의: 유사 클래스는 IE9부터 지원됩니다.

여기서 속성 선택기를 사용할 수 있습니다.

input[type="text"] {
    font-family: Arial, sans-serif;
}

이 기능은 IE7 이상에서 지원됩니다.IE6을 지원해야 하는 경우 IE7.js를 사용하여 이에 대한 지원을 추가할 수 있습니다.

자세한 내용은 http://reference.sitepoint.com/css/attributeselector 를 참조하십시오.

저는 주로 메인 스타일시트에서 실렉터를 사용한 다음 모든 입력 유형에 클래스를 추가하는 i6 특정 .js(jquery) 파일을 만듭니다.예:

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

그런 다음 클래스를 사용하여 IE6 특정 스타일시트에 내 스타일을 복제합니다.그렇게 하면 실제 마크업이 조금 더 깨끗해집니다.

jQuery에서 다음을 사용할 수 있습니다.:text텍스트 유형이 포함된 모든 입력을 선택합니다.여기서 작동하는 피들을 참조하십시오.

$(document).ready(function () {
    $(":text").css({  // or $("input:text")
        'background': 'green',
        'color':'#fff'
    });
});

:text는 jQuery 확장자이며 CSS 사양의 일부가 아닙니다.사용한 쿼리:text네이티브 DOM이 제공하는 성능 향상을 활용할 수 없습니다.querySelectorAll()방법.최신 브라우저에서 성능을 향상시키려면 다음을 사용합니다.[type="text"]대신.이것은 효과가 있을 것입니다.IE6+.

$("[type=text]").css({  // or $("input[type=text]")
    'background': 'green',
    'color':'#fff'
});

일반 CSS의 경우 다음을 사용합니다.

[type=text] { /* or input[type=text] */
    background: green;
}

@Aamir가 언급했듯이, 현재 가장 좋은 방법은 크로스 브라우저와 IE6를 사용하는 것입니다.

[type=text] {}

아직 아무도 낮은 CSS 특이성에 대해 언급하지 않았습니다(왜 그것이 중요합니까?).[type=text] 기능은 0,0,1,1 대신 0,0,1,0입니다.input[type=text].

성능 측면에서는 더 이상 부정적인 영향이 없습니다.

normalize v4.0.0은 방금 출시된 셀렉터 특수성이 낮아졌습니다.

테이블 행 내부의 텍스트 입력 필드에 스타일을 지정하려고 합니다.다음 코드로 했습니다.

.admin_table input[type=text]:focus {
    background-color: #FEE5AC;
}

입력[type="text"]

웹 페이지의 모든 입력 유형 텍스트를 선택합니다.

속성 선택기를 사용하여 CSS의 입력 유형 텍스트를 대상으로 합니다.

input[type=text] {
background:gold;
font-size:15px;
 }

언급URL : https://stackoverflow.com/questions/4113965/css-selector-for-text-input-fields