Câu trả lời:
input[type=text]hoặc, để hạn chế nhập văn bản bên trong các biểu mẫu
form input[type=text]hoặc, để hạn chế hơn nữa ở một hình thức nhất định, giả sử nó có id myForm
#myForm input[type=text]Lưu ý: Điều này không được IE6 hỗ trợ, vì vậy nếu bạn muốn phát triển cho IE6, hãy sử dụng IE7.js (như Yi Jiang đề xuất) hoặc bắt đầu thêm các lớp vào tất cả các kiểu nhập văn bản của bạn.
Tham khảo: http://www.w3.org/TR/CSS2/selector.html#attribution-selector
Vì được chỉ định rằng các giá trị thuộc tính mặc định có thể không phải lúc nào cũng có thể được chọn bằng các bộ chọn thuộc tính, nên người ta có thể cố gắng bao gồm các trường hợp đánh dấu khác mà đầu vào văn bản được hiển thị:
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'Tuy nhiên, điều này vẫn để lại trường hợp khi loại được xác định, nhưng có giá trị không hợp lệ và nó vẫn rơi trở lại loại = "văn bản". Để bao quát rằng chúng ta có thể sử dụng chọn tất cả các đầu vào không phải là một trong các loại đã biết khác
input:not([type=button]):not([type=password]):not([type=submit])...Nhưng bộ chọn này sẽ khá vô lý và danh sách các loại có thể đang phát triển với các tính năng mới được thêm vào HTML.
Lưu ý: lớp :notgiả chỉ được hỗ trợ bắt đầu với IE9.
Bạn có thể sử dụng bộ chọn thuộc tính ở đây:
input[type="text"] {
font-family: Arial, sans-serif;
}Điều này được hỗ trợ trong IE7 trở lên. Bạn có thể sử dụng IE7.js để thêm hỗ trợ cho việc này nếu bạn cần hỗ trợ IE6.
Xem: http://reference.sitepoint.com/css/attributelector để biết thêm thông tin
sans-serifkhông san-serif.
Tôi thường sử dụng các bộ chọn trong biểu định kiểu chính của mình, sau đó tạo tệp .js (jquery) cụ thể có nghĩa là thêm một lớp cho tất cả các loại đầu vào. Thí dụ:
$(document).ready(function(){
$("input[type='text']").addClass('text');
)};Và sau đó chỉ cần sao chép các kiểu của tôi trong biểu định kiểu cụ thể eg6 bằng cách sử dụng các lớp. Bằng cách đó, đánh dấu thực tế là một chút sạch sẽ hơn.
Bạn có thể sử dụng Công cụ :textchọn để chọn tất cả các mục nhập có loại văn bản
$(document).ready(function () {
$(":text").css({ //or $("input:text")
'background': 'green',
'color':'#fff'
});
});:textlà một phần mở rộng jQuery và không phải là một phần của đặc tả CSS, các truy vấn sử dụng: text không thể tận dụng hiệu suất tăng hiệu suất được cung cấp bởi phương thức DOM querySelectorAll () gốc. Để có hiệu suất tốt hơn trong các trình duyệt hiện đại, sử dụng [type="text"]thay thế. Điều này sẽ làm việc cho IE6+.
$("[type=text]").css({ // or $("input[type=text]")
'background': 'green',
'color':'#fff'
});CSS
[type=text] // or input[type=text]
{
background: green;
}Tôi đã có trường văn bản loại đầu vào trong một trường hàng bảng. Tôi đang nhắm mục tiêu nó với mã
.admin_table input[type=text]:focus
{
background-color: #FEE5AC;
}Như @Amir đã đăng ở trên, cách tốt nhất hiện nay - trình duyệt chéo và bỏ lại IE6 - là sử dụng
[type=text] {}Không ai nhắc đến thấp đặc hiệu CSS ( tại sao là có quan trọng ?) Cho đến nay, [type=text] các tính năng 0,0,1,0 thay vì 0,0,1,1 với input[type=text].
Hiệu suất-khôn ngoan không còn tác động tiêu cực nữa.
chuẩn hóa v4.0.0 vừa được phát hành với độ đặc hiệu của bộ chọn thấp hơn .
Với bộ chọn thuộc tính, chúng tôi nhắm mục tiêu văn bản loại đầu vào trong CSS
input[type=text] {
background:gold;
font-size:15px;
}đầu vào [loại = văn bản]
Điều này sẽ chọn tất cả các văn bản loại đầu vào trong một trang web.
Các bộ chọn thuộc tính thường được sử dụng cho đầu vào. Đây là danh sách các bộ chọn thuộc tính:
[title] Tất cả các yếu tố với thuộc tính title được chọn.
[title = Banana] Tất cả các yếu tố có giá trị 'chuối' của thuộc tính tiêu đề.
[title ~ = Banana] Tất cả các yếu tố có chứa 'chuối' trong giá trị của thuộc tính tiêu đề.
[title | = Banana] Tất cả các yếu tố có giá trị của thuộc tính title bắt đầu bằng 'Banana'.
[title ^ = Banana] Tất cả các yếu tố có giá trị của thuộc tính title bắt đầu bằng 'Banana'.
[title $ = Banana] Tất cả các yếu tố có giá trị của thuộc tính title kết thúc bằng 'Banana'.
[title * = Banana] Tất cả các yếu tố có giá trị của thuộc tính title chứa chuỗi con 'Banana'.
Tham khảo: https://kolosek.com/css-selector/