Форумы портала PHP.SU :: Версия для печати

1. kosik82 - 02 Января, 2014 - 19:26:47 - перейти к сообщению

может не совсем по теме форума, но все же,
как скрыть scrollbar в select?
он очень портит вид.

2. IllusionMH - 02 Января, 2014 - 19:28:54 - перейти к сообщению

kosik82, а как угадать что там есть еще варианты не видя полосы прокрутки?
Нарисовать свой кастомный "выпадающий список" или использовать плагины(для jQuery их куча)

3. kosik82 - 02 Января, 2014 - 19:30:24 - перейти к сообщению

IllusionMH пишет:

kosik82, а как угадать что там есть еще варианты не видя полосы прокрутки?
Нарисовать свой кастомный "выпадающий список" или использовать плагины(для jQuery их куча)

перефразирую, когда полоса прокрутки не активна.
желательно без jQuery, только на стилях.

4. IllusionMH - 02 Января, 2014 - 19:36:32 - перейти к сообщению

kosik82, все равно придется рисовать свой. Этот элемент даже не имеет Shadow DOM в котором можно было бы попытаться найти сколл.

5. kosik82 - 02 Января, 2014 - 19:40:01 - перейти к сообщению

IllusionMH пишет:

kosik82, все равно придется рисовать свой. Этот элемент даже не имеет Shadow DOM в котором можно было бы попытаться найти сколл.

для остальных же подходит overflow: hidden;
неужели для селекта ничего нет?

6. IllusionMH - 02 Января, 2014 - 19:44:45 - перейти к сообщению

kosik82, нет

7. kosik82 - 02 Января, 2014 - 20:27:51 - перейти к сообщению

IllusionMH пишет:

kosik82, нет

нет, нет, можно!!!

нашел кусок кода, где скрыта полоса прокрутки.
и только на стилях.

CODE (html):
скопировать код в буфер обмена

<style type="text/css">
.styled-select {
   width: 240px;
   height: 50px;
   overflow: hidden;
   border: 1px solid #ccc;
}
.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   border: 0;
   font-size: 16px;
   line-height: 1;
   height: 50px;
   -webkit-appearance: none;
}
 
.styled-select select:focus {
   outline: none;
}
 
</style>
 
<div class="styled-select"> 
<select size="4">
<option>Here is the first option</option>
<option>The second option</option> 
</select>
</div>