집 > 기사 > 웹 프론트엔드 > CSS 사용자 정의 드롭다운 목록 스타일의 샘플 코드 공유를 간략하게 소개합니다.

CSS 사용자 정의 드롭다운 목록 스타일의 샘플 코드 공유를 간략하게 소개합니다.

黄舟원래의: 2017-07-26 09:56:113953검색

드롭다운 목록의 기본 스타일:

드롭다운 목록을 사용자 정의하는 두 가지 방법은 다음과 같습니다.

방법 1:

드롭다운 순수한 CSS 스타일로 목록을 작성하세요.

원리: 기본 드롭다운 목록 스타일을 지우고 스타일을 사용자 정의한 다음 오른쪽에 정렬된 작은 화살표 그림을 첨부합니다.

<!doctype html>
<html>
	<head>
		<style type="text/css">
			select{
				width:200px;
				height:30px;
				appearance:none;
			    -moz-appearance:none;
			    -webkit-appearance:none;
				background: url("images/select.png") no-repeat right center;
				font-size:16px;
				font-family:Microsoft YaHei;
				color:red;
			}
		</style>
	</head>
	<body>
		<form action="" method="post">
			<select>
				<option value="请选择">请选择</option>
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="广州">广州</option>
			</select>
		</form>
	</body>
</html>

문제: 옵션의 너비와 높이 수정이 잘못되었습니다.

방법 2:

p+ul+jQuery를 사용하여 사용자 정의 스타일 드롭다운 목록 선택을 구현합니다.

HTML 코드:

<p id="container">
	<form action="" method="post">
		<p>
			<ul>
				<li class="active">请选择</li>
				<li>北京</li>
				<li>上海</li>
				<li>广州</li>
			</ul>
		</p>
	</form>
</p>

CSS 코드:

#container{
	background:grey;
	width:300px;
	height:200px;
	padding:20px;
}
form p{
    width:236px;
    height:34px;
}
form p{
	font-family:Microsoft YaHei;
    background:#FFFFFF;
}
form p:hover{
    border:1px solid #E74F4D;
}
form ul{
	margin:0;
	padding:0;
}
form ul li:first-child{
    height:34px;
    line-height:34px;
}
form ul li{
    width:236px;
    height:24px;
    line-height:24px;
    font-size:15px;
    color:#323333;
    opacity:0.7;
    background:#e3e3e5;
    text-indent:12px;
	display:none;
}
form ul li.active{
    display:block;
    background:url("images/arrows_active_down.gif") no-repeat scroll right center;
    opacity:1;
}
form ul li:not(.active):hover{
    background:#E74F4D;
    color:white;
}

j쿼리 코드:

$(document).ready(function(){
    var p = $("form").find("p");
    p.mouseover(function(e) {
        var event = e || window.event;
        var target = event.target || event.srcElement;
        var _this = $(this);
        if(target.nodeName.toLowerCase() == &#39;li&#39;) {
            _this.find(&#39;li&#39;).css(&#39;display&#39;, &#39;block&#39;);
            _this.find(&#39;li&#39;).click(function(){
                var li = $(this);
                _this.find(&#39;.active&#39;).text(li.text());
            });
        }
        _this.mouseout(function(e) {
            var event = e || window.event;
            var target = event.target || event.srcElement;
            if(target.nodeName.toLowerCase() == &#39;li&#39;)
				_this.find(&#39;li&#39;).not(&#39;.active&#39;).css(&#39;display&#39;,&#39;none&#39;);
        });
    });
});

위 내용은 CSS 사용자 정의 드롭다운 목록 스타일의 샘플 코드 공유를 간략하게 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：매우 아름답고 실용적인 CSS 스타일 테이블 4개를 공유하세요.다음 기사：매우 아름답고 실용적인 CSS 스타일 테이블 4개를 공유하세요.