Стиль пустой вариант из <select> в печати, чтобы скрыть его

Question

Мои <select> теги содержат опции по умолчанию с подсказкой для пользователя, например:

<option value="">Select a country...</option> 

Если пользователь не выбрал ничего, я хочу, чтобы скрыть «Выберите страну» в печати.

Вот что я пробовал:

@media print { 
option[value=''] { 
    color: transparent !important; 
    width: 1px; 
    display: none; 
    font-size: 1px; 
    text-indent: -100px; 
    opacity: 0; 
} 
} 

Ничего из этого не работает.

Другие темы здесь, в StackOverflow о стилинге, индивидуально <option> s возможно, если вы назначили класс этой конкретной опции.

Я сделал это (класс имел правило display:none), но это тоже не помогло.

Есть ли способ только с CSS, чтобы скрыть <select> s с пустой опцией, выбранной в печати?

Answer 1

Вы пробовали:

<select> 
 
    <option disabled selected>Choose..</option> 
 
    <option>First option</option> 
 
    <option>Second option</option> 
 
</select>

Чтобы скрыть от печати:

@media print { 
 
    select option[disabled] { 
 
    display: none; 
 
    } 
 
}

<select> 
 
    <option disabled selected>Choose</option> 
 
    <option value="first">First option</option> 
 
    <option value="second">Second option</option> 
 
</select>