實現(xiàn)純css美化select的案例？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)，為客戶提供網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計開發(fā)服務(wù)，多年建網(wǎng)站服務(wù)經(jīng)驗，各類網(wǎng)站都可以開發(fā)，品牌網(wǎng)站設(shè)計，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設(shè)計，建網(wǎng)站費用，建網(wǎng)站多少錢，價格優(yōu)惠，收費合理。

效果圖如下：

Cars Select
    

        
            Volvo
            Saab
            Opel
            Audi
        
    

body {
		font-size: 20px;
		color: #090;
		background-color: #eee;
		text-align: center;
	}
	.select {
		display: inline-block;
		width: 300px;
		position: relative;
		vertical-align: middle;
		padding: 0;
		overflow: hidden;
		background-color: #fff;
		color: #555;
		border: 1px solid #aaa;
		text-shadow: none;
		border-radius: 4px;	
		transition: box-shadow 0.25s ease;
		z-index: 2;
	}

	.select:hover {
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	}

	.select:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-top-color: #ccc;
		top: 14px;
		right: 10px;
		cursor: pointer;
		z-index: -2;
	}
	.select select {
		cursor: pointer;
		padding: 10px;
		width: 100%;
		border: none;
		background: transparent;
		background-image: none;
		-webkit-appearance: none;
		-moz-appearance: none;
	}

	.select select:focus {
		outline: none;
	}

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)建站的支持。

名稱欄目：實現(xiàn)純css美化select的案例-創(chuàng)新互聯(lián)
分享地址：http://weahome.cn/article/iopdg.html