텍스트 입력 필드를위한 CSS 선택기?

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

input[type=text]

또는 양식 내의 텍스트 입력으로 제한

form input[type=text]

또는 ID가 있다고 가정하고 특정 형식으로 더 제한하기 위해 myForm

#myForm input[type=text]

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

참조 : 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'

여전히 유형이 정의되었지만 유효하지 않은 값이 있고 여전히 type = "text"로 대체되는 경우가 있습니다. 우리는 다른 알려진 유형 중 하나가 아닌 모든 입력을 선택할 수 있음을 다루기 위해

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

그러나이 선택기는 매우 말도 안되며 HTML에 새로운 기능이 추가되면서 가능한 유형 목록 도 늘어나고 있습니다.

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

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

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

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

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

나는 주로 메인 스타일 시트에서 선택기를 사용하고 모든 입력 유형에 클래스를 추가하는 ie6 특정 .js (jquery) 파일을 만듭니다. 예:

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

그런 다음 클래스를 사용하여 ie6 특정 스타일 시트에서 내 스타일을 복제하십시오. 그렇게하면 실제 마크 업이 약간 더 깨끗해집니다.

: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;
}

테이블 행 필드에 입력 유형 텍스트 필드가 있습니다. 코드로 타겟팅하고 있습니다.

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

@Amir가 위에 게시 한 것처럼 오늘날 브라우저 간 및 IE6 뒤를 떠나는 가장 좋은 방법은 사용하는 것입니다.

[type=text] {}

아무도 (낮은 CSS 특이성을 언급하지 이유 입니다 그 중요한 ?) 지금까지 [type=text] 기능 0,0,1,0 대신 0,0,1,1와 input[type=text].

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

낮은 선택기 특이성으로 방금 릴리스 된 v4.0.0을 정규화 합니다 .

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

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

입력 [유형 = 텍스트]

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

속성 선택기는 종종 입력에 사용됩니다. 다음은 속성 선택기 목록입니다.

[title] title 속성을 가진 모든 요소가 선택됩니다.

[title = banana] title 속성의 'banana'값이있는 모든 요소

[title ~ = banana] title 속성 값에 'banana'가 포함 된 모든 요소

[title | = banana] title 속성의 값이 'banana'로 시작하는 모든 요소

[title ^ = banana] title 속성의 값이 'banana'로 시작하는 모든 요소

[title $ = banana] title 속성 값이 'banana'로 끝나는 모든 요소

[title * = banana] title 속성 값이 하위 문자열 'banana'를 포함하는 모든 요소입니다.

참조 : https://kolosek.com/css-selectors/