Стиль div с CSS, так что он выглядит точно так же, как по умолчанию выбор формы HTML

Question

Есть ли способ стилизовать div с помощью css, чтобы он выглядел точно так же, как и его собственная форма выбора HTML? ,Точно так же, как на этих фотографиях. нет парения парения . Дело в том, что я делаю многоуровневое выпадающее меню в javascript, и я хочу, чтобы оно выглядело как стандартный выбор HTML. Единственная часть, которую я не могу понять, - стрелка с синим градиентом при наведении. Я не могу правильно расположить его.

Это моя структура div

<div class="multilevel-dropdown-display"><span class="multilevel-dropdown-value"></span> <span class="multilevel-dropdown-arrow"></span></div>

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

вот стиль css для стрелки

.multilevel-dropdown-arrow {

    background-image: url("icon.png");
    width:16px; 
    height:18px;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    background-repeat:no-repeat;


}

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

Answer 1

Вам нужно заключить стрелку в другой div с отступом. Итак, структура HTML будет выглядеть так:

<div class="multilevel-dropdown-display"><span class="multilevel-dropdown-value"></span> <div class="multilevel-dropdown-arrow-box"><span class="multilevel-dropdown-arrow"></span></div></div>

После применения эффекта заполнения и наведения CSS будет выглядеть так:

.multilevel-dropdown-arrow-box {border:1px solid transparent;padding-top , padding-bottom: 5px;padding-left , padding-right:3px;}
.multilevel-dropdown-display:hover .multilevel-dropdown-arrow-box {background: linear-gradient(to bottom, rgba(0,0,255,0), rgba(0,0,255,0.8));border:1px solid blue;}

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

Answer 2

Вы можете использовать селектор: hover для css, чтобы каждый раз, когда вы наводите указатель мыши на ваш класс, он отображал желаемый результат.

Пример

.multilevel-dropdown-arrow:hover {
  // put your code herer
}