Как стилизовать options в select?

Question

[gladislav99]

Пытаюсь стилизовать выпадающий список select, но не получается стилизовать именно options (сам блок select сделал)
Должно быть так:

А у меня вот так. Со знанием js у меня мягко говоря плоховато, и по примерам с интернета сделать не получилось

Буду рад любой подсказке или помощи (куда глядеть). p.S. форму верстаю в Contact Form7 (WordPress).

Comments

[Froggyweb]

ну плагинами например https://select2.org/appearance

[FeST1VaL]

Как по мне проще сделать кастомный select просто на дивах

[gladislav99]

FeST1VaL, было бы проще, но в contact form 7 нельзя это сделать.

[gladislav99]

Froggyweb, ок спасибо, попробую разобраться

Answer 1

[generate]

Думаю примерно так работает бутстрап select, дальше стилиризуй как нужно.
Передаешь select объект в функцию

//Тут передаешь класс select
Select(document.querySelector('.beatu-select'));

https://codepen.io/vsjerkil/pen/MWbYYOa?editors=1010

Comments

[gladislav99]

Отлично спасибо!

Answer 2

[Дмитрий Комчев]

Примеры стилизации select

Comments

[Дмитрий Комчев]

Простой пример под заголовком Input select, вам подойдёт под WordPress.

[gladislav99]

спасибо попробую

Answer 3

[Lord_Dantes]

Зачем вам контакт форм 7? Если ради заявок куда-то, то можно и самому отправку писем сделать.
Я про то, если не получается кастомизировать селект в контакт форм 7.

Comments

[gladislav99]

Не моё к сожалению пожелание ) Я сам его не особо люблю)

Answer 4

[Lukmann]

сделай кастомные select на дивах,и создай select внутри которого будет option которому ты должен задатьdisplay: none; и при каждом клике на кастомный option ты должен записывать его значение в настоящий option