我使用了一个选择选项下拉菜单,它有一个默认的设计如下:
<div class="select-wrapper">
<div class="form-group">
<div class="multipleSelection" id="selectQueryTemplateAdd">
<select id="selectQueryTemplate" class="dynamic_Time form-control TaskOverlayDropDown">
<option selected="selected"> Select </option>
<option value="Please confirm the status of the event whether it is resolved. If y....">Please confirm the status of the event whether it is resolved. If ye....</option>
<option value="Narrative mentions that the subj....">Narrative mentions that the subject ...".</option>
</select>
<div class="overSelect"></div>
</div>
</div>
</div>
是否有任何方法可以更改其默认设计,如下图所示:
- 当我们悬停在值上时,它应该显示指针(手形图标)
- 当我们悬停时,下面的背景色应该在那里。
- 要调整其高度和宽度
- 如果下拉列表的数据长度如下,那么当我们打开下拉列表时,只有一部分数据是可见的。但是当我们将鼠标悬停在任何值上时,完整的数据应该作为工具提示可见。
1条答案
按热度按时间7z5jn7bk1#
你需要使用像bootstrap这样的CSS框架来实现这种样式。https://getbootstrap.com/