Cách tạo kiểu chỉ một loại trường nhập mà không ảnh hưởng đến các loại đầu vào khác với CSS

Question

Có cách viết các quy tắc kiểu chỉ ảnh hưởng đến các trường văn bản hay không. Giả sử tôi có như sau:

<div id="helloDiv"> 
<input type="text" name="something" /><br /> 
<input type="checkbox" name="somethingElse" /><br /> 
<input type="submit" name="go" /> 
</div> 

div#helloDiv input { 
    border: 1px solid red; 
} 

Vấn đề với các quy tắc CSS ở trên là nó sẽ ảnh hưởng đến tất cả các lĩnh vực đầu vào không chỉ là văn bản đầu vào mà còn nút radio, trình nút, vv

Vậy là có một giải pháp trình duyệt chéo chỉ ảnh hưởng đến một loại trường nhập trong một phần tử div hoặc phần tử trang khác (mà không cần phải chỉ định kiểu trường nhập riêng lẻ).

Answer 1

Cách tẻ nhạt nhất nhưng IE6 tương thích để làm điều đó là để cho tất cả input type="text" yếu tố của bạn một số lớp CSS cụ thể, như class="text", và nhắm mục tiêu lớp đó chỉ:

div#helloDiv input.text { 
    /* Styles */ 
} 

Cách đơn giản nhất, nhưng CSS2.1 Cách tương thích với IE6 chỉ là

div#helloDiv input[type="text"] { 
    /* Styles */ 
} 

mà không sửa đổi mã HTML của bạn.

Hợp đồng bổ sung: theo nhận xét của animuson, chọn một trong hai trong số này. Quyết định xem bạn có cần hoặc muốn hỗ trợ IE6 hay không và lấy mã thích hợp.

Answer 2

input[type=text] {} 

Nó không tương thích trong IE6, nhưng hầu hết các trình duyệt khác. Để làm cho nó hoàn toàn tương thích giữa các trình duyệt, bạn sẽ cần phải áp dụng một lớp chung cho tất cả các yếu tố đầu vào cùng loại hoặc sử dụng JavaScript. Xem here.

Answer 3

Bạn có thể sử dụng một attribute selector, trông như thế này:

input[type=text] { 
    /* stuff */ 
} 

Bây giờ, hỗ trợ cho does not extend to Ye Olde IE6 này. Vì vậy, nhiều người chỉ đơn giản là cắn đạn và thêm các lớp học vào đầu vào của họ để tạo kiểu cho chúng. Sau đó, bạn có thể đặt kiểu phổ biến cho các yếu tố đầu vào của mình và sau đó thay đổi cho các loại cụ thể. Vì vậy, một cái gì đó như:

input { /* common styles */ } 
input.mySubmit { /* only submit */ } 
input.myText { /* only text */ }