Jump to content
  • 0

Помогите стилизировать селект


beliy
 Share

Question

есть селект вида:

3e4a0a6a5709.png

 

Как его оптимальнее всего стилизировать? Реально ли сделать на чистом css? Насколько предложенные способы получатся кроссбраузерными?

Заранее огромное спасибо за оказанную помощь...

Edited by beliy
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

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

Благодарю за понимание...

Link to comment
Share on other sites

  • 0

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

Благодарю за понимание...

 

А чего тут «профессионального»? По ссылке есть ответ с кучей примеров, вся основа сводится к тому, что нужно сбросить стили через appearance: none. А дальше уже стилизуйте, как хотите. В вашем случае всего-то нужно настроить размеры селекта, текста и круглые края через border-radius. Стрелку можно задать либо простым бэкграундом, либо псевдоэлементом.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy