Tôi có một danh sách thả xuống liệt kê các họ phông chữ. Giống như Tahoma, Arial, Verdana, v.v. Tôi muốn thay đổi họ phông chữ của từng mục thả xuống theo giá trị mà nó đại diện. Giống như Photoshop.Làm thế nào để thay đổi họ phông chữ của mục danh sách thả xuống?
Tôi đã thay đổi CSS cho từng mục thả xuống nhưng nó chỉ hoạt động trên FireFox. Nó không hoạt động trên bất kỳ trình duyệt nào khác.
Tôi không muốn sử dụng bất kỳ plugin jQuery nào.
Đó là bởi vì select yếu tố trẻ em (option s) không phải là thực sự stylable và firefox có vẻ là trình duyệt duy nhất bỏ qua phần đó của spec.
Giải pháp thay thế là thay thế phần tử select của bạn bằng tiện ích tùy chỉnh chỉ sử dụng các yếu tố có thể tạo kiểu và có lẽ là một chút javascript cho tương tác. như những gì đang thực hiện ở đây:
http://jsfiddle.net/sidonaldson/jL7uU/
hoặc http://jsfiddle.net/theredhead/4PQzp/
<select>
<option style="font-family: 'Comic Sans MS'">Comic Sans MS</option>
<option style="font-family: Arial">Arial</option>
<option style="font-family: 'Times New Roman'">Times New Roman</option>
</select>
bạn có thể o qua trang web này u sẽ có được ý tưởng
thưởng thức :)
nhờ
Những gì bạn có thể làm trong CSS là những gì bạn mô tả: thiết font-family trên option yếu tố, và điều này có hỗ trợ trình duyệt hạn chế. Các trình duyệt có thể thực hiện các phần tử select sử dụng các thường trình một phần hoặc hoàn toàn miễn dịch với CSS.
Giải pháp thay thế là sử dụng thứ gì đó khác với yếu tố select, chẳng hạn như một bộ nút radio, nhưng tất nhiên nó sẽ được hiển thị khác với trình đơn thả xuống. Sau đó, bạn có thể sử dụng ví dụ:
<div><input type="radio" name="font" value="Tahoma" id="tahoma">
<label for="tahoma" style="font-family: Tahoma">Tahoma</label></div>
...
này nên Cung cấp cho bạn một ý tưởng như ho để thực hiện điều này:
<select>
<option value="Arial">First</option>
<option value="Verdana">Second</option>
</select>
$(function() {
$('select > option').hover(function() {
$(this).parent().css({fontFamily:$(this).val()})
})
})
anh ấy nói anh ấy không muốn sử dụng jquery. – khurram
Sẽ đáng xem xét nếu đó là trình duyệt chéo, nhưng không hoạt động trong Chrome khi tôi thử nó ngay bây giờ. –
Hãy thử điều này:
<html>
<head>
<style>
.styled-select {
overflow: hidden;
height: 30px;
}
.styled-select select {
font-size: 14pt;
font-family:"Times New Roman",Times,serif;
height: 10px;
}
</style>
<title></title>
</head>
<body>
<div class="styled-select">
<select>
<option selected="selected" >One</option>
<option >Two</option>
</select>
</div>
</body>
</html>
Bạn có thể đặt phông chữ cho một danh sách thả xuống HTML theo cách sau:
1. Xây dựng danh sách các tùy chọn mà sẽ được desplayed trong trình đơn thả xuống của bạn, nhưng không áp dụng bất kỳ kiểu dáng/lớp học nào cho bất kỳ tùy chọn nào trong số đó. Trong PHP, tôi sẽ lưu trữ danh sách các tùy chọn của mình vào một biến và sau đó sử dụng biến đó để thêm các tùy chọn vào danh sách thả xuống mà tôi sẽ hiển thị bên dưới.
2. Khi bạn muốn thực sự chèn thả xuống thành trang, sử dụng thẻ SELECT và đặt một số phong cách CSS bên trong thẻ mà như tôi đã trình bày dưới đây:
<SELECT style='font-size: 10px; font-family: "Verdana", Sans-Serif;' name='???????'>
<?php echo $your_variable_containing_dropdown_content; ?>
</SELECT>
đó làm việc 100% tốt cho tôi trong trang web tôi hiện đang làm việc. Đây chỉ là kiểu dáng mà tôi đã sử dụng trong trang của tôi, nhưng nó có thể là bất cứ thứ gì bạn cần.
Firefox không thực sự vi phạm thông số kỹ thuật. Thay vào đó, các thông số kỹ thuật im lặng về vấn đề liệu các phần tử 'option' có thể tạo kiểu (mặc dù kỳ vọng tự nhiên là chúng có thể được tạo kiểu giống như bất kỳ phần tử nào khác, nhưng triển khai thường sử dụng các công nghệ không cho phép điều đó). –
Tôi nhớ đọc rằng điều khiển biểu mẫu phải là nền tảng gốc. Có vẻ như không thể tìm thấy nơi tôi đọc mà mặc dù, và tôi chỉ có thể bị nhầm lẫn về nơi tôi đọc nó. Tuy nhiên, hầu hết các trình duyệt đều sử dụng các điều khiển biểu mẫu gốc nền tảng theo như tôi có thể nói. – Kris
http://jsfiddle.net/sidonaldson/jL7uU/ liên kết không hoạt động –