html - 下拉元素箭头在单击时上下移动

Question

我不知道他们是否是选择元素上此箭头的属性或其他内容，但基本上当您切换下拉菜单时，箭头会旋转 180 度，如果我能找到箭头的属性，那么我将不会有这样做有问题。任何建议。

<select class = "two">
 <option selected disabled hidden style='display: none' value='' class = "ddowns_vari" value = " 2. design"> 2. design</option>
</select>
 <div class = "selected_content2">Lorem ipsum Lorem ipsum Lorem ipsum
 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>

您还可以在此处找到演示站点 http://79.170.40.182/kingsley-test.co.uk/kingsley%209.9.2016/kingsley-new/contingency.php

Answer 1

这并不是使用 select 元素的正确方法，不幸的是，由于它是一个浏览器对象，您几乎无法对其进行修改。

像这样你会过得更好

<div>
  <span>Select this</span>
  <div>Content here</div>
</div>

div {width: 200px;}
span {display: block;}
span::after {content:"V"; float: right;}
span:hover::after {transform: rotate(180deg); cursor: pointer;}

http://codepen.io/rachelreveley/pen/QKapyA

显然，将 V 更改为合适的箭头图标或图形，并添加一些 jQuery 以显示下方的 div。