下拉元素箭头在单击时上下颠倒

时间:2016-10-05 12:17:51

标签: html css drop-down-menu

我不知道他们的选择元素上是否有属性或此箭头的东西,但基本上当你切换下拉箭头时,如果我能找到箭头的属性,那么我将不会有箭头旋转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

1 个答案:

答案 0 :(得分:0)

这不是使用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。