替换选项 选择与复选框

Question

早上好，我正在尝试替换每个选项的选项 选中复选框以便能够提供更好的样式并改进其实现的功能，但是当将其更改为复选框时，它不履行使用该选项的功能， 它实现的功能是在每个选择中搜索选定的标签， 它是为博主准备的。

我希望让您单击每个选择中的选定复选框。但是我一直没有成功，希望你能帮助我，非常感谢！

<div class="tabs-outer">
<div class="tabs-cap-top cap-top">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
<div class="fauxborder-left tabs-fauxborder-left">
<div class="fauxborder-right tabs-fauxborder-right"></div>
<div class="region-inner tabs-inner">
<div class="tabs section" id="crosscol">
<div class="widget HTML" id="HTML3">
<h2 class="title">Buscador Avanzado</h2>
<div class="widget-content">
<div id="multi-search">
<select class="cmbColumn" id="cmbColumn" name="cmbColumn[]" multiple>
<input type="Checkbox" name="cmbColumn[]" value="acción+" />1
<input type="Checkbox" name="cmbColumn[]" value="TV" /> TV
<input type="Checkbox" name="cmbColumn[]" value="TV" /> TV
<input type="Checkbox" name="cmbColumn[]" value="TV" /> TV
</select>
<select class="cmbSidebar" id="cmbSidebar" name="cmbSidebar[]" multiple>
<input type="checkbox" name="cmbSidebar[]" value="TV+" />1
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
</select>
<select class="cmbColor" id="cmbColor" name="cmbColor[]" multiple>
<input type="checkbox" name="cmbColor[]" value="TV" />1
<input type="checkbox" name="cmbColor[]" value="TV" /> TV
<input type="checkbox" name="cmbColor[]" value="TV" /> TV
</select>
<input class="filtro" onclick=" getValue() " value="Filtrar" type="button" />
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=4472703516037708465&amp;widgetType=HTML&amp;widgetId=HTML3&amp;action=editWidget&amp;sectionId=crosscol" onclick=" return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML3&quot;)); " target="configHTML3" title="Edit">
<img alt="" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" height="18" width="18" />
</a>
</span>
</span>
<div class="clear"></div>
</div>
</div>
<div class="tabs section" id="crosscol-overflow"></div>
</div>
</div>
<div class="tabs-cap-bottom cap-bottom">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
<script type="text/javascript">
function getValue() {
var valcmbColumn = document.getElementById("cmbColumn").value;
valcmbSidebar = document.getElementById("cmbSidebar").value;
valcmbColor = document.getElementById("cmbColor").value;
valOutput = (valcmbColumn + valcmbSidebar + valcmbColor);
window.open("/search/label/" + valOutput, "_self");
}
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "block") {
e.style.display = "none";
} else {
e.style.display = "block";
}
}
</script></div>

Answer 1

正如Scott Marcus所提到的，您必须创建自己的下拉组件才能将复选标记添加到某种选择中。

像这样：

只需使 span 元素看起来像一个选择选项，并使其可单击而不是悬停(如果您愿意(。

您还可以根据自己的喜好设置选择div的样式。

.selections{
transform:scaleY(0);
transition: all 0.5s;
transform-origin:top;
height:0;
}
.selector{
cursor:pointer;
}
.selector:hover .selections{
transform:scaleY(1);
height:auto;
border: 1px solid red;
width:200px;
margin-top:5px;
}

<div class="selector"><span style="border:1px solid red">Hover me and style me as select</span>
<div id="selections" class="selections">
<input type="checkbox" value="Something" /> Something <br />
<input type="checkbox" value="Something" /> Something <br />
<input type="checkbox" value="Something" /> Something <br />
<input type="checkbox" value="Something" /> Something <br />
<input type="checkbox" value="Something" /> Something <br />
</div>
</div>