javascript - 如何将选择选项显示为按钮?
问题描述
我有一个带有选择的表格:
<select name="work_days" id="id_work_days" multiple="multiple">
<option value="1">sun</option>
<option value="2">mon</option>
<option value="3">tue</option>
<option value="4">wed</option>
<option value="5">thu</option>
<option value="6">fri</option>
<option value="7">sat</option>
</select>
我想通过css和javascript将此表单字段呈现为一组按钮(见截图)
我试图将其显示为
<input type="button" name="work_days" value="sun">
<input type="button" name="work_days" value="mon">
<input type="button" name="work_days" value="tue">
<input type="button" name="work_days" value="wed">
...
但我无法在后端从这个表单中获取和验证数据。选择小部件会提供最好的服务,但我不知道如何将其显示为按钮。
我会很感激一个想法或一个例子。
解决方案
您可以为选择元素中的选项设置样式
#id_work_days{
height: 44px;
border: none;
overflow: hidden;
}
#id_work_days::-moz-focus-inner {
border: 0;
}
#id_work_days:focus {
outline: none;
}
#id_work_days option{
width: 60px;
font-size: 1.2em;
padding: 10px 0;
text-align: center;
margin-right: 20px;
display: inline-block;
cursor: pointer;
border:rgb(204, 204, 0) solid 1px;
border-radius: 5px;
color: rgb(204, 204, 0);
}
<select name="work_days" id="id_work_days" multiple>
<option value="1">sun</option>
<option value="2">mon</option>
<option value="3">tue</option>
<option value="4">wed</option>
<option value="5">thu</option>
<option value="6">fri</option>
<option value="7">sat</option>
</select>
推荐阅读
- overriding - 覆盖 prestashop 类以公开一个受保护的方法
- python - Python 正则表达式 - 从字符串中提取数字并具有正向前瞻
- python-3.x - 根据其他列中的条件创建 BOOL 列
- python - Python - 如何过滤文件列表并仅返回包含特定扩展名的值?
- typescript - 打字稿:listServiceLevelObjectives 给出 UnhandledPromiseRejectionWarning:错误:3 INVALID_ARGUMENT
- javascript - 如何在 js 构造函数上做一个数组
- javascript - 节点列表内容
- ios - 用swift将汉字音译成拉丁语
- php - 如何使用php头函数返回目录
- javascript - setInterval 运行次数超出预期?