Câu hỏi Làm cách nào để tạo một trình giữ chỗ cho hộp 'chọn'?


Tôi đang sử dụng trình giữ chỗ cho các đầu vào văn bản đang hoạt động tốt. Nhưng tôi cũng muốn sử dụng một trình giữ chỗ cho các hộp chọn của tôi. Ofcourse tôi chỉ có thể sử dụng mã này:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

Nhưng 'Chọn tùy chọn của bạn' có màu đen thay vì lightgrey. Vì vậy, giải pháp của tôi có thể có thể dựa trên CSS. jQuery cũng tốt.

Điều này chỉ làm cho tùy chọn màu xám trong trình đơn thả xuống (vì vậy sau khi nhấp vào mũi tên):

option:first {
    color: #999;
}

Chỉnh sửa: Câu hỏi là: làm cách nào để mọi người tạo trình giữ chỗ trong các hộp chọn? Nhưng nó đã được trả lời, cổ vũ.

Và sử dụng kết quả này trong giá trị được chọn luôn luôn là màu xám (ngay cả sau khi chọn một tùy chọn thực):

select {
    color:#999;
}

1131
2018-04-27 13:39


gốc




Các câu trả lời:


Làm thế nào về một CSS không - không có câu trả lời javascript / jQuery?

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>


2335
2018-05-02 15:45



Firefox (10) không hiển thị tùy chọn bị tắt làm lựa chọn mặc định (trình giữ chỗ). Nó cho thấy cái tiếp theo theo mặc định, trong trường hợp này là "Durr". - jarnoan
Tôi thường thêm cả bị vô hiệu hóa và được chọn. Dường như làm việc trong FF nữa. - nilskp
<select> <option value="" disabled selected>Select your option</option> </select> - kolypto
Lý do đây không phải là câu trả lời đúng là bởi vì (tôi tin) người hỏi muốn chọn màu xám cho đến khi một giá trị khác được chọn. Câu trả lời này làm cho tùy chọn màu xám trong trình đơn thả xuống; nhưng không phải phần tử chọn. - Bill
chọn {option [disabled] {display: none; }} - Dimael Vertigo


Chỉ cần vấp phải câu hỏi này, đây là những gì hiệu quả trong FireFox & Chrome (ít nhất)

<style>
    select:invalid { color: gray; }
</style>
<form>
    <select required>
        <option value="" disabled selected hidden>Please Choose...</option>
        <option value="0">Open when powered (most valves do this)</option>
        <option value="1">Closed when powered, auto-opens when power is cut</option>
    </select>
</form>

Tùy chọn Tắt đã dừng <option> được chọn bằng cả chuột và bàn phím, trong khi chỉ sử dụng 'display:none' cho phép người dùng vẫn chọn qua các mũi tên trên bàn phím. Các 'display:none' phong cách chỉ làm cho hộp danh sách trông 'đẹp'.

Lưu ý: Sử dụng trống value thuộc tính trên tùy chọn "trình giữ chỗ" cho phép xác thực (thuộc tính bắt buộc) để làm việc xung quanh có "trình giữ chỗ", vì vậy nếu tùy chọn không thay đổi nhưng được yêu cầu; trình duyệt sẽ nhắc người dùng chọn một tùy chọn từ danh sách.

Cập nhật (tháng 7 năm 2015):

Phương thức này được xác nhận làm việc trong các trình duyệt sau:

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7 (Trình giữ chỗ hiển thị trong menu thả xuống nhưng không thể chọn)
  • Microsoft Internet Explorer - v.11 (Trình giữ chỗ hiển thị trong menu thả xuống nhưng không thể chọn)
  • Project Spartan - v.15.10130 (Trình giữ chỗ hiển thị trong menu thả xuống nhưng không thể chọn)

Cập nhật (tháng 10 năm 2015):

Di chuyển style="display: none" ủng hộ thuộc tính HTML5 hidden có hỗ trợ rộng. Các hidden phần tử có các đặc điểm tương tự như display: none trong Safari, IE, (Dự án Spartan cần kiểm tra) ở đâu option hiển thị trong menu thả xuống nhưng không thể chọn được.

Cập nhật (tháng 1 năm 2016):

Khi mà select phần tử là required nó cho phép sử dụng :invalid CSS giả lớp cho phép bạn tạo kiểu cho select khi ở trạng thái "trình giữ chỗ". :invalid hoạt động ở đây vì giá trị trống trong trình giữ chỗ option.

Khi giá trị đã được đặt :invalid lớp giả sẽ bị loại bỏ. Bạn cũng có thể tùy ý sử dụng :valid nếu bạn muốn.

Hầu hết các trình duyệt đều hỗ trợ lớp giả này. IE10 +. Điều này hoạt động tốt nhất với kiểu tùy chỉnh select yếu tố; Trong một số trường hợp, ví dụ: (Mac trong Chrome / Safari), bạn cần phải thay đổi giao diện mặc định của select để các kiểu nhất định hiển thị tức là background-color, color. Bạn có thể tìm thấy một số ví dụ và nhiều hơn nữa về tính tương thích tại developer.mozilla.org.

Xuất hiện phần tử gốc Mac trong Chrome:

Select box native Mac in Chrome

Sử dụng phần tử biên giới đã thay đổi trong Chrome:

Altered select box Mac in Chrome


622
2017-12-09 08:22



@jaacob Trong các trình duyệt mà tôi đã thử nghiệm, kiểu 'display: none' ẩn "Hãy chọn" từ danh sách mà chỉ làm cho nó đẹp hơn. - William Isted
Quan trọng cần lưu ý là không thể chọn lại tùy chọn đã tắt: nếu lựa chọn là bắt buộc, điều này là ok - nhưng không phải nếu lựa chọn là tùy chọn. - Robert Mark Bram
Explorer11 bỏ qua display:none Phong cách. - T30
Kudos đến @MattW để làm việc :invalid trước khi tôi làm. - William Isted
Bạn cũng có thể thêm quy tắc để "đặt lại" color các tùy chọn hỗ trợ các trình duyệt như trong này fiddle. Điều này sẽ giúp củng cố rằng việc giải thể option là trình giữ chỗ. (Edit: Tôi thấy MattW đã đề cập đến điều này trong câu trả lời của anh ấy) - Shaggy


Đối với trường bắt buộc, có một giải pháp thuần CSS trong trình duyệt hiện đại:

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>


178
2018-04-22 18:30



Tuyệt vời - đó là câu trả lời ở phía dưới (không có upvotes nào được nêu ra) đó là đơn giản nhất, và thực sự hoạt động hoàn hảo. Cảm ơn! Hy vọng câu trả lời này sẽ tăng lên hàng đầu. - Dan Nissenbaum
@DanNissenbaum Tôi đã rất muộn để trò chơi, cộng với nó không cần required để làm việc nên không sử dụng nếu bạn muốn trường là tùy chọn. - MattW
Như một sang một bên, :required bộ chọn không được hỗ trợ trong IE8 trở xuống. Các :invalid bộ chọn không được hỗ trợ trong IE9 trở xuống. quirksmode.org/css/selectors - Matt Wagner
Không có giải pháp cho lựa chọn không bắt buộc? - user3494047
@ user3494047 không phải với phương pháp này - required điều kiện là nguyên nhân khiến trình duyệt áp dụng :invalid pseudo-class khi trình giữ chỗ được chọn. [value=""] sẽ không hoạt động như một sự thay thế bởi vì những gì được cập nhật bởi tương tác của người dùng là giá trị bất động sản nhưng cú pháp CSS đó đề cập đến một (không tồn tại) thuộc tính. - MattW


Một cái gì đó như thế này có thể?

HTML:

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

CSS:

#choice option { color: black; }
.empty { color: gray; }

JavaScript:

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

Ví dụ làm việc: http://jsfiddle.net/Zmf6t/


92
2018-04-27 13:50



đây là chính xác những gì tôi đã làm gần đây. nhưng tôi đã thêm trình xử lý khóa để thay đổi cũng xảy ra khi tùy chọn được chọn qua bàn phím (sử dụng các phím mũi tên hoặc phím tắt chữ cái) jsfiddle.net/Zmf6t/131 - Radu
điều này đặt tôi vào đúng hướng ... tuy nhiên tôi đã tạo giá trị = "" (không có gì giữa dấu ngoặc kép) để khi nút gửi được nhấp, nó vẫn không thể xác thực tùy chọn đầu tiên và cửa sổ bật lên trình duyệt sẽ xuất hiện thông báo cho bạn để chọn một tùy chọn ... cảm ơn @Albireo - Craig Wayne
Tại sao bạn gọi hàm thay đổi một cách rõ ràng. - Foreever
@Tất cả vì tôi đặt lớp CSS trong trình xử lý sự kiện thay đổi của lựa chọn, vì vậy nếu bạn không tự nâng cao sự kiện khi điều khiển được xây dựng, kiểu không được áp dụng (nó sẽ chỉ được áp dụng khi người dùng thay đổi giá trị theo cách thủ công). - Albireo


Tôi chỉ cần thêm thuộc tính ẩn trong tùy chọn như dưới đây, Nó làm việc tốt cho tôi.

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>


35
2018-06-30 10:42



Chỉ cần cho các bản ghi, điều này không làm việc cho tôi (Chrome trên Win10). - Chris Rae
Nhưng bạn không thể bỏ đặt nó. Bạn sẽ chọn một nhưng bạn không thể đặt lại trong trường hợp nếu bạn thay đổi ý định. - Thielicious
Yeah! Nhưng bên trong biểu mẫu, người dùng phải chọn bất kỳ tùy chọn nào trong số đó. Nếu trường không phải là trường bắt buộc, hãy xóa thuộc tính ẩn sau đó. - Ajithkumar S


Giải pháp đó hoạt động trong FireFox cũng:
Không có JS nào.

option[default] {
  display: none;
}
<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>


22
2018-02-12 08:24





Tôi đã có cùng một vấn đề và trong khi tìm kiếm đã đi qua câu hỏi này, và sau khi tôi tìm thấy giải pháp tốt cho tôi, tôi muốn chia sẻ nó với các bạn trong trường hợp một số người có thể hưởng lợi từ nó. đây là: HTML:

<select class="place_holder dropdown">
    <option selected="selected" style=" display: none;">Sort by</option>
    <option>two</option>
    <option>something</option>
    <option>4</option>
    <option>5</option>
</select>

CSS:

.place_holder{
    color: gray;
}
option{
    color: #000000;
}

JS:

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});

Sau khi khách hàng lựa chọn đầu tiên không cần màu xám để JS loại bỏ lớp place_holder. Tôi hi vọng điêu nay se giup được ai đo :)

Cập nhật: Nhờ @ user1096901, như một công việc xung quanh cho trình duyệt IE, bạn có thể thêm place_holder lớp một lần nữa trong trường hợp tùy chọn đầu tiên được chọn một lần nữa :)


19
2017-08-11 05:00



Trong một số trình duyệt, anh ta vẫn có thể chọn tùy chọn display: none, bởi vì nó không bị ẩn. - Srneczek
bạn đúng, tôi phải đối mặt với điều này trong trình duyệt IE - rramiii
Công việc xung quanh cho việc này là thêm lớp "place_holder" một lần nữa trong trường hợp tùy chọn đầu tiên được chọn :) - rramiii


đây là của tôi

select:focus option.holder {
  display: none;
}
<select>
    <option selected="selected" class="holder">Please select</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>


12
2017-11-15 06:00



Bạn chỉ có thể thêm <option value="" selected disabled>Please select</option> là tùy chọn đầu tiên. - sstauross
Wow. Thật tuyệt vời! - Georgy Ivanov
Nó không làm cho chỗ dành sẵn có màu xám nhạt. - Chloe


Tôi thấy dấu hiệu của câu trả lời đúng nhưng để mang lại tất cả cùng nhau này sẽ là giải pháp của tôi.

select{
  color: grey;
}

option {
  color: black;
}

option[default] {
   display: none;
}
<select>
    <option value="" default selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>


11
2018-04-10 16:50



Durr có màu xám sau khi bạn chọn. Điều này buộc hộp chọn đóng luôn xám. - Chloe