Как стилизовать только пустой SELECT в CSS?

Question

[Сергей Кореневский]

<select name=order>
</select>

В CMS JOOMLA используется встроенный кастомный SELECT с поддержкой мультивыбора на JS.
Содержимое этого поля добавляется динамически.
Как стилизовать пустой SELECT ?
Такой стиль НЕ работает!

select:empty{
	display: none; /* НЕ РАБОТАЕТ */
}

Конечная цель, это то что мне надо при печати страницы скрывать пустые поля. Но в поле нет динамических классов показывающих количество выбранных полей.

Answer 1

[Вадим]

Через css, пожалуй только с помощью :not(:has) - браузерная поддержка не полная. Проверяйте перед использованием.
Либо поправить шаблон чтобы не было переноса строки внутри пустого селекта, тогда будет работать :empty.



Иначе только на js обходить селекты, возможно через mutation observer и накидывать нужный класс для стилизации

Comments

[Сергей Кореневский]

на самом деле мне нужно скрывать родительский тег, я пользуюсь :HAS для поиска дочерних пустых SELECT.
На stackoverflow.com не нашёл ответа.
СПАСИБО ОГРОМНОЕ.

[Вадим]

Сергей Кореневский, если .input-group не является селект, то логично что не работает.

Вы на русском сформулируйте то что Вы написали:
выбрать input-group который не является селектом с опциями.

Судя по Вашим сообщениями. Это не то, что Вам нужно.

Покажите разметку на какой что нужно скрыть и точно опишите условие что и когда в ней нужно скрыть - подскажу как правильно написать

[Сергей Кореневский]

Вадим,
Нашёл ответ

.input-group:not(:has(option)):has( select ){
	display: none;
}

Спасибо огромне за Вашу помощь.

Код был такой

<joomla-field-fancy-select class="input-group" >
	<div class="choices" >
		<div class="choices__inner">	
			<select name="field_Categories[]" >
			</select>
		</div>
	</div>
</joomla-field-fancy-select>

[Вадим]

Сергей Кореневский, если Вам не нужно проверять именно наличие селекта, то селектор стоит упростить и убрать has(select). Т.к. если в блоке нет option то и select в нём нет.

[Вадим]

Сергей Кореневский, p.s. СКОРЕЕ ВССЕГО если нет option у блока, то и select внутри него нет, т.к. есть ещё datalist который тоже работает с option

[Сергей Кореневский]

Вадим,
datalist есть, но он выполнен на обычных DIVaх.
И если удалить :has( select ) , тогда будут удалятся теги которые вообще не являются SELECT, в моём случае удаляются поле-календарь. Эти поля так же имеют класс .input-group
иначе мне в имя класса нужно дописывать имя тега

joomla-field-fancy-select.input-group:not(:has(option))

.

[Сергей Кореневский]

Вадим,
Вот нашёл стилизацию для обычного SELECT

.input-group:has(  option:checked[value="0"]){
	display: none;
}

Стиль будет скрывать только когда выбрано Empty

<select class="input-group" name="field_Categories[]" >
  <option name='0'>Empty<option>
  <option name='1'>One<option>
  <option name='2'>Two<option>
</select>

За всё Вам благодарен.

[Вадим]

Сергей Кореневский, Да, всё верно.
Не за что, обращайтесь.

[Сергей К]

:has еще рано использовать, верстка не пройдет тестирование

[Вадим]

Сергей К, чьё тестирование?

[Сергей К]

Вадим, тестировщика, дизайнера, заказчика я не знаю кто именно с данном случае этим занимается

[Вадим]

Сергей К, Ну тогда очевидный вопрос, а зачем Вы пишите что не пройдёт тестирование если не знаете? Автор и сам уже взялся использовать и мной был предупреждён. Значит решение уже было принято.

can i use говорит что global support 87%. Весьма не мало.

10 версий хромиума, 10 версий оперы, и -1 мажорная от текущей ios.
Не поддерживает только лиса.

[Сергей Кореневский]

Сергей К, Вадим, Этот псевдокласс :has будет использоваться в АдминПанели CMS Joomla. (то что этот псевдокласс на продакшине использовать нельзя я и сам знаю). Кстати этот псевдокласс используется только для ПЕЧАТИ из браузера, чтобы скрывать поля во время печати. Т.е. этот псевдокласс не затронет тех кто не печатает из браузера в АдминПанели. А если и затронет тех кто не поддерживает это, то тогда НЕТ ни чего страшного, что пустое поле будет напечатано.
И вообще, ответ должен быть отвечен на вопрос как задано.
А то постоянно сталкиваюсь с тем как я сокращаю вопрос до простоты, а потом 90% отвечающих мне говорят, что на продакшине я не правильно всё делаю. И что я должен делать изначально всё по другому, интересно то что как надо делать я и сам знаю, так как опыт 20 лет, а мне говорят с 7 летним стажем что я не правильно задаю вопрос. Тем более как надо делать пишут везде в примерах и уроках. Я текст вопроса пишу чтобы из названия была ясно для поисковика и ровно для тех кто ищет ответ ровно на эту ситуацию.
А потом мне люди пишут, что же я сразу не описал проблему своей ситуации без сокращенний. Вполне очевидно, когда пишешь вопрос без сокращений, то ответа вообще не будет ни какого. Люди не отвечают на мудрёнодлинные вопросы.
За что Вадим большой респект и уважуха, так как Вадим увидел что раз именно этот вопрос человек спрашивает, значит оне не глуп професионально, а просто ему надо выйти из этой ситуации.

[Сергей К]

Сергей Кореневский, душно

[Сергей Кореневский]

Сергей К, разумеется у Вас опыт 7 лет.