javascript - 更改默认选择下拉外观和感觉
问题描述
让我们看看我有一个选择:
<select class="selectpicker">
<option selected> A </option>
<option> B </option>
<option> C </option>
</select>
查看选项时,您将如何更改下拉菜单中显示的项目的外观和感觉?
我的直觉是你会隐藏默认选项并使用你自己的 css 或/和 javascript 填充一个新列表?
解决方案
jQuery
$(document).ready(function(e){
$(".DropdownWrapper").focusin(function(e){
$(".Dropdown").css('display', 'block');
});
$(".Item").click(function(e){
var val = $(this).text();
$(".Textfield").val(val);
$(".Dropdown").css('display', 'none');
});
});
HTML
<div class="Content">
<h1>Custom Dropdown Menu For a Textfield By Farris</h1>
<div class="DropdownWrapper">
<input type="text" class="Textfield" placeholder="Animal" />
<div class="Dropdown">
<div class="Item">Lion</div>
<div class="Item">Cat</div>
<div class="Item">Dog</div>
<div class="Item">Monkey</div>
</div>
</div>
</div>
CSS
body{
background-color: #222;
color: #FFF;
font-family: sans-serif;
margin: 0px;
}
.Content{
width: 800px;
height: auto;
overflow: visible;
margin: 30px auto;
}
.Textfield{
width: 220px;
height: 20px;
background-color: #111;
color: #FFF;
font-family: sans-serif;
padding: 15px;
border: none;
outline: none;
border-radius: 3px;
}
.DropdownWrapper{
width: 250px;
height: 50px;
position: relative;
margin-bottom: 10px;
}
.Dropdown{
position: absolute;
top: 50px;
left: 0px;
width: 250px;
height: auto;
overflow: visible;
z-index: 1;
display: none;
}
.Item{
width: 220px;
height: 20px;
padding: 15px;
color: #CCC;
background-color: #111;
}
.Item:hover{
background-color: #000;
cursor: pointer;
color: #FFF;
}
此代码段适用于文本字段和按钮
推荐阅读
- go - 使用 db.Create 和 db.FirstOrCreate 将数据保存到数据库时,“ID”列的值为“0”
- ios - iPhone X 布局对比普通 iPhone 布局
- matlab - cell2mat 在执行转换时从元胞数组中消除一列
- reactjs - 与 react-final-form 一起使用时,textarea 中未填充 defaultValue
- python - 根据新值对 CSV 进行排序并打印前 10 行
- c# - C# windows 媒体播放器事件:播放列表完成时
- python - 删除列表中的重复项并使用重复项在第一个出现的列表索引中创建子列表
- php - 在php上上传多个图像
- r - Rpart 为测试集中的每个观察预测 0 和 1
- node.js - 下载 GeckoDriver 时 webdriver-manager 更新失败