这是我的HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
我想让产品的名称(即。'Product1', 'Product2',等等),以及它的类别(即。电子,体育等)斜体,只使用CSS。我发现了一个老问题,提到这是不可能使用HTML和CSS,但希望,现在有一个解决方案。
该元素由操作系统呈现,而不是HTML。它不能通过CSS样式。
$(function() {
var clicky;
var t=0;
$(document).mousedown(function(e) {
clicky = $(e.target);
});
$(document).mouseup(function(e) {
clicky = null;
});
$("select").focusout(function(e) {
if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) {
$(this).parents().children("span.selected").html(clicky.html());
$(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true);
}
$(this).parents().children("span.lists").html('');
});
$('select > option').text(function(i, text) {
var attr = $(this).attr('selected');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).parents().parents().children("span.selected").html(text);
}
});
$("select").focusin(function(){
$(this).children('option').text(function(i, text) {
$(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");
});
});
});
select {
width: 0px;
height: 0px;
overflow:hidden;
outline: none;
border: none;
appearance:none;
-moz-appearance: none;
}
label{
display: inline-block;
padding: 5px 10px;
position: relative;
width: 100px;
height: 20px;
background-color:#ccc;
}
label .selected{
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
}
label span.lists{
width: 100%;
display: inline-block;
position: absolute;
top: 100%;
left: 0px;
box-shadow: 0px 0px 2px 0px #ccc;
background-color:#fff;
z-index: 9;
}
label span.item{
display: inline-block;
width: 100%;
border-bottom: 1px solid #ccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="?" method="GET">
<label><span class="selected">select..</span> <span class="lists"></span>
<select name="test">
<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
<option value="2" selected>item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
</select>
</label><br>
<label><span class="selected">select..</span> <span class="lists"></span>
<select name="test2">
<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
<option value="2">item 2</option>
<option value="3" selected>item 3</option>
<option value="4">item 4</option>
</select>
</label><br>
<button>Submit</button>
</form>
</body>
</html>
试试这个,可能会对你有帮助
[ https://codepen.io/venu9l/pen/jeNXzY][1]
该元素由操作系统呈现,而不是HTML。它不能通过CSS样式。
$(function() {
var clicky;
var t=0;
$(document).mousedown(function(e) {
clicky = $(e.target);
});
$(document).mouseup(function(e) {
clicky = null;
});
$("select").focusout(function(e) {
if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) {
$(this).parents().children("span.selected").html(clicky.html());
$(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true);
}
$(this).parents().children("span.lists").html('');
});
$('select > option').text(function(i, text) {
var attr = $(this).attr('selected');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).parents().parents().children("span.selected").html(text);
}
});
$("select").focusin(function(){
$(this).children('option').text(function(i, text) {
$(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");
});
});
});
select {
width: 0px;
height: 0px;
overflow:hidden;
outline: none;
border: none;
appearance:none;
-moz-appearance: none;
}
label{
display: inline-block;
padding: 5px 10px;
position: relative;
width: 100px;
height: 20px;
background-color:#ccc;
}
label .selected{
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
}
label span.lists{
width: 100%;
display: inline-block;
position: absolute;
top: 100%;
left: 0px;
box-shadow: 0px 0px 2px 0px #ccc;
background-color:#fff;
z-index: 9;
}
label span.item{
display: inline-block;
width: 100%;
border-bottom: 1px solid #ccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="?" method="GET">
<label><span class="selected">select..</span> <span class="lists"></span>
<select name="test">
<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
<option value="2" selected>item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
</select>
</label><br>
<label><span class="selected">select..</span> <span class="lists"></span>
<select name="test2">
<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
<option value="2">item 2</option>
<option value="3" selected>item 3</option>
<option value="4">item 4</option>
</select>
</label><br>
<button>Submit</button>
</form>
</body>
</html>
试试这个,可能会对你有帮助
[ https://codepen.io/venu9l/pen/jeNXzY][1]
您可以使用内联样式向<option>标记添加自定义样式。
<option style="font- family:宋体;“>选项1 > < /选项
这将只对这个<option>元素应用样式。
然后你可以使用一点javascript魔法,将内联样式应用到<select>标签中的所有<option>元素,如下所示:
var select = $(document).getElementById('#select-element-id')
Var选项= select.children('#option-element-id')
option.css(“粗细”、“大胆”)
option.css(“字体大小”、“24 px”)
您也可以使用<option value="" disabled> <br> </option>在选项之间添加换行符。