[英]Custom CSS for dropdown box
對於我的下拉框,我添加了從Codepen項目中提取的自定義css。
這是我的HTML
<div class="size ">
<form action="#">
sort by:
<select name="size" id="sort-by" class="custom-select sources" placeholder="Source Type">
<option value="price-asc" {{ app('request')->input('sort')=='price-asc'?'selected':''}}>Price: Lowest first</option>
<option value="price-desc" {{ app('request')->input('sort')=='price-desc'?'selected':''}}>Price: Highest first</option>
<option value="name-asc" {{ app('request')->input('sort')=='name-asc'?'selected':''}}>Product Name: A to Z</option>
<option value="name-desc" {{ app('request')->input('sort')=='name-desc'?'selected':''}}>Product Name: Z to A</option>
</select>
</form>
</div>
這是從codepen項目中提取的自定義css
/** Custom Select **/
.custom-select-wrapper {
position: relative;
display: inline-block;
user-select: none;
}
.custom-select-wrapper select {
display: none;
}
.custom-select {
position: relative;
display: inline-block;
}
.custom-select-trigger {
position: relative;
display: block;
width: 130px;
padding: 0 84px 0 22px;
font-size: 22px;
font-weight: 300;
color: #fff;
line-height: 60px;
background: #5c9cd8;
border-radius: 4px;
cursor: pointer;
}
.custom-select-trigger:after {
position: absolute;
display: block;
content: '';
width: 10px; height: 10px;
top: 50%; right: 25px;
margin-top: -3px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg) translateY(-50%);
transition: all .4s ease-in-out;
transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
position: absolute;
display: block;
top: 100%; left: 0; right: 0;
min-width: 100%;
margin: 15px 0;
border: 1px solid #b5b5b5;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 2px 1px rgba(0,0,0,.07);
background: #fff;
transition: all .4s ease-in-out;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-15px);
}
.custom-select.opened .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateY(0);
}
.custom-options:before {
position: absolute;
display: block;
content: '';
bottom: 100%; right: 25px;
width: 7px; height: 7px;
margin-bottom: -4px;
border-top: 1px solid #b5b5b5;
border-left: 1px solid #b5b5b5;
background: #fff;
transform: rotate(45deg);
transition: all .4s ease-in-out;
}
.option-hover:before {
background: #f9f9f9;
}
.custom-option {
position: relative;
display: block;
padding: 0 22px;
border-bottom: 1px solid #b5b5b5;
font-size: 18px;
font-weight: 600;
color: #b5b5b5;
line-height: 47px;
cursor: pointer;
transition: all .4s ease-in-out;
}
.custom-option:first-of-type {
border-radius: 4px 4px 0 0;
}
.custom-option:last-of-type {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
.custom-option:hover,
.custom-option.selection {
background: #f9f9f9;
}
這是從codepen中提取的JavaScript
$(".custom-select").each(function() {
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
var template =
'<div class="' +
$(".custom-select").each(function() {
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
var template = '<div class="' + classes + '">';
template +=
'<span class="custom-select-trigger">' +
$(this).attr("placeholder") +
"</span>";
template += '<div class="custom-options">';
$(this)
.find("option")
.each(function() {
template +=
'<span class="custom-option ' +
$(this).attr("class") +
'" data-value="' +
$(this).attr("value") +
'">' +
$(this).html() +
"</span>";
});
template += "</div></div>";
$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});
$(".custom-option:first-of-type").hover(
function() {
$(this)
.parents(".custom-options")
.addClass("option-hover");
},
function() {
$(this)
.parents(".custom-options")
.removeClass("option-hover");
}
);
$(".custom-select-trigger").on("click", function() {
$("html").one("click", function() {
$(".custom-select").removeClass("opened");
});
$(this)
.parents(".custom-select")
.toggleClass("opened");
event.stopPropagation();
});
$(".custom-option").on("click", function() {
$(this)
.parents(".custom-select-wrapper")
.find("select")
.val($(this).data("value"));
$(this)
.parents(".custom-options")
.find(".custom-option")
.removeClass("selection");
$(this).addClass("selection");
$(this)
.parents(".custom-select")
.removeClass("opened");
$(this)
.parents(".custom-select")
.find(".custom-select-trigger")
.text($(this).text());
});
classes + '">';
template +=
'<span class="custom-select-trigger">' +
$(this).attr("placeholder") +
"</span>";
template += '<div class="custom-options">';
$(this)
.find("option")
.each(function() {
template +=
'<span class="custom-option ' +
$(this).attr("class") +
'" data-value="' +
$(this).attr("value") +
'">' +
$(this).html() +
"</span>";
});
template += "</div></div>";
$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});
$(".custom-option:first-of-type").hover(
function() {
$(this)
.parents(".custom-options")
.addClass("option-hover");
},
function() {
$(this)
.parents(".custom-options")
.removeClass("option-hover");
}
);
$(".custom-select-trigger").on("click", function() {
$("html").one("click", function() {
$(".custom-select").removeClass("opened");
});
$(this)
.parents(".custom-select")
.toggleClass("opened");
event.stopPropagation();
});
$(".custom-option").on("click", function() {
$(this)
.parents(".custom-select-wrapper")
.find("select")
.val($(this).data("value"));
$(this)
.parents(".custom-options")
.find(".custom-option")
.removeClass("selection");
$(this).addClass("selection");
$(this)
.parents(".custom-select")
.removeClass("opened");
$(this)
.parents(".custom-select")
.find(".custom-select-trigger")
.text($(this).text());
});
下拉工作完美。 但它的選擇顯示超出其他元素 。 請看下面的圖片。
所以有人可以告訴我這里有什么不對。
很可能是z-index
的問題。 搜索你的CSS沒有顯示任何提及它,這將使它遵循靜態流,這意味着它將顯示在任何后來放置或更高的z-index元素下。
鏈接的示例在頁面上沒有任何其他元素,因此這不是問題。 將彈出元素的z-index
更改為任意大的值可以解決問題。
(最初是評論,但解決了這個問題,在此發布給未來的訪問者。)
使用z-index並將其設置為更高的值(例如99)應該使您的元素位於頂部。 z-index僅適用於定位元素(位置:絕對,位置:相對,位置:固定或位置:粘滯)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.