Как установить высоту или отступы в окне выбора (выпадающем списке) для сафари и хрома?

Question

Я хочу установить высоту или ширину в окне выбора.

<?php $subjectList=array('0'=>'Questions','1'=>'Feedback / Suggestions','2'=>'Location Owner Inquiry' ,'3'=>'Other');?>

<select name="vSubject" data-errormessage-value-missing="Select Reason!" id="vSubject"  >
   <option value="" >-Select One-</option>
   <?php foreach($subjectList as $r=>$k) { ?>
         <option value="<?php echo $r?>" ><?php echo $k?></option>
   <?php }?>
</select>

Заполнение и высота не работает в SAFARI. Так что предложите какое-нибудь решение.

Answer 1

Вы пробовали этот CSS для своего выпадающего меню?

overflow: hidden;
border: none;
outline: none;
-webkit-appearance: none;

Для Safari вы можете попробовать

-webkit-appearance: menulist-button;

так что ширина и высота будут работать ( ссылка)

затем вы можете использовать background,font-family,padding и т. д. для дальнейшего улучшения вашего собственного тега select. У меня это сработало в Safari/Chrome/FF ...

РЕДАКТИРОВАТЬ:

Редактировать опцию тега не так просто. Вы можете использовать CSS ниже, но, к сожалению, все не настраивается

select option {
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}       

источники: 1, 2

Answer 2

Скрипка здесь Используйте комбинацию отступа текста и высоты строки, чтобы создать иллюзию заполнения. Работает в Safari. Должно работать и в IE.

#vSubject {
    text-indent:15px; line-height:28px;
}

Answer 3

Попробуй вот так.

select {
 width: 170px; 
 height: 25px;
 -webkit-appearance: menulist-button;
}

Answer 4

select { line-height : 28px; float : left; }