kzen.dev
Дополнительно
Вопрос

CSS Стиль стрелки поля выбора

Я хочу убрать стрелку по умолчанию из поля выбора и хочу использовать пользовательский значок. Из предыдущих ответов на SO я выяснил, что это невозможно (чтобы это работало в основных браузерах). Единственная возможность - обернуть select внутри div, установить его ширину больше ширины div и установить overflow: hidden. Я пытаюсь сделать следующее, но это не работает. Что я делаю не так?

.selectParent {
  width: 80px;
  overflow: hidden;
}

.selectParent select {
  width: 100px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 2px 30px 2px 2px;
  border: none;
  background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}
<div class="selectParent">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>           
   </select>
</div>

JSFiddle:

Peter B
Peter B
Редактировал вопрос 11-го апреля 2018 в 7:41
Программирование
css3
html
css

Пожалуйста, следуйте нижеприведенному способу:

.selectParent {
    width:120px;
    overflow:hidden;   
}
.selectParent select { 
    display: block;
    width: 100%;
    padding: 2px 25px 2px 2px; 
    border: none; 
    background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") right center no-repeat; 
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none; 
}
.selectParent.left select {
    direction: rtl;
    padding: 2px 2px 2px 25px;
    background-position: left center;
}
/* for IE and Edge */ 
select::-ms-expand { 
    display: none; 
}
<div class="selectParent">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>           
   </select>
</div>
<br />
<div class="selectParent left">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>           
   </select>
</div>
1

Попробуйте заменить

padding: 2px 30px 2px 2px;

на

padding: 2px 2px 2px 2px;

Это должно сработать.

0
Похожие сообщества 10
HTML/CSS — русскоговорящее сообщество
6 455 пользователей
Возникли проблемы с HTML или CSS? – пиши сюда, обсудим и предложим самое лучшее решение. @javascript_ru @js_noobs_ru @frontend_ru Каналы: @defront @htmlshit 🟡 Ищешь чат? @it_chats 🟡 Мы всегда рады помочь, но у нас есть правила. ВАЖНО: http://nometa.xyz
Верстка сайтов HTML/CSS/JS/PHP
2 919 пользователей
Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Библиотека верстальщика: @weblibrary Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @bigmarketolog Автор: @M_Boroda
WebPwnChat
2 631 пользователей
В этом чате обсуждаются атаки и уязвимости на веб-приложения. Любой оффтоп карается баном.
Frontend_ru
2 468 пользователей
Русскоговорящее сообщество фронтенд разработчиков Каналы: @frontendnoteschannel @defront Чаты: @bem_ru @javascript_ru @css_ru Важно! http://nometa.xyz
Чат — Типичный Верстальщик
2 373 пользователей
✅ Наш канал: @tpverstak Если не можете писать в чате, то перезайдите и подтвердите, что вы не бот, нажав на кнопку 🔥 ПРАВИЛА ЧАТА — @annblok/BygPgC3E7" rel="nofollow noopener noreferrer" class="text-blue hover:text-black link" target="_blank">https://teletype.in/@annblok/BygPgC3E7 👍 За бан разбанов нет
JavaScript чат | HTML 5 & CSS 3
2 228 пользователей
Чат для тех кому нужна помощь по коду, или есть какие-то вопросы по реализации задачи в JavaScript. 💼 По вопросам: @dictor_inc ✏️ Правила: t.me/javascript_alert/3070 Практика: https://t.me/joinchat/GmZ5CkHxDCszM2ko