Thêm lớp Css vào tất cả các phần tử <input type'text '>? Javascript/Css?

Tôi muốn áp dụng một lớp CSS cho mọi textbox trong trang web của tôi:Thêm lớp Css vào tất cả các phần tử <input type'text '>? Javascript/Css?

 <div class="editor-label"> 
      <label for="FoodType">FoodType</label> 
     </div> 
     <div class="editor-field"> 
      <input id="HelpText" name="FoodType" type="text" value="" /> 
     </div> 

     <p> 
      <input type="submit" value="Create" /> 
     </p>

Và tôi nghĩ, Hey! Dễ dàng. Tôi sẽ thêm một hàm jquery để tìm tất cả chúng trong masterpage.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('input').addClass('textbox'); 
    } 
</script>

Thật không may điều này cũng sẽ chọn nút gửi. Làm thế nào tôi chỉ có thể chọn các yếu tố đầu vào có thuộc tính loại văn bản?

Có thể thay thế bằng cách sử dụng CSS hoàn toàn?

Nếu cả hai phương pháp này đều không thực hiện được, tôi đoán tôi sẽ chỉ phải thêm lớp học theo cách thủ công vào mọi hộp văn bản mà tôi tạo ra?

Nguồn

2010-05-14 4imble

AFAIK nó:

$('input[type=text]').addClass('textbox');

Và bạn có thể làm tương tự như trong file CSS, nhưng điều đó đòi hỏi phải có phiên bản cao hơn của CSS/tùy cách rộng bạn muốn được ở bên các trình duyệt cũ.

Xem bộ chọn thuộc tính trong here. Lưu ý rằng:

"Hỗ trợ trình duyệt: Trình duyệt duy nhất không hỗ trợ bộ chọn thuộc tính CSS3 là IE6. Do đó, hãy sử dụng trình duyệt IE7 và IE8, trình duyệt Opera và Webkit- và Gecko. chắc chắn là an toàn. "

Nguồn

2010-05-14 17:01:16 eglasius

Tuyệt vời, cảm ơn rất nhiều. – 4imble

'$ ('đầu vào [loại = văn bản]')' sẽ hoạt động trong IE6 vì jQuery sẽ quay trở lại sử dụng công cụ chọn riêng của nó thay vì hỗ trợ dựng sẵn của trình duyệt. 'đầu vào [type = text] {...}' trong một bản định kiểu CSS, mặt khác, sẽ thất bại trong IE6. – bobince

@bobince giải pháp kinh điển sẽ phân tích cú pháp HTML với RegEx tôi đoán là –

-1

<!DOCTYPE html> 

<html> 
<head> 

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
</script> 


<script type="text/javascript"> 
$(document).ready(function(){ 

$(".post_class").css({padding:"10px",background:"#333",color:"#fff"}); 

$("#post_button").css({padding:"10px",background:"#333", textAlign:"center",color:"#fff",cursor:"pointer"}) 

$("#post_button").click(function(){ 
var input = $("input[name='checkListItem']").val(); 

$(".post_class").append('<div class="item">' + input + '</div>'); 

}); 

}); 
</script> 


</head> 

<body> 

<form name="checkListForm"> 

<input type="text" name="checkListItem"/> 

</form> 

<div id="post_button">Post</div> 

<br/> 

<div class="post_class"></div> 

</body> 

</html>

Nguồn

2015-12-28 09:48:48

Điều này không trả lời được câu hỏi, vậy tại sao điều này được đăng ở đây? – fisk

Thêm lớp Css vào tất cả các phần tử <input type'text '>? Javascript/Css?

Trả lời

Các vấn đề liên quan