How to beautify selection using pure css? Code implementation of css beautification select

The content of this article is about how to use pure CSS to beautify select? The code implementation of css beautification select has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The renderings are as follows:

<h2>Cars Select</h2>
    <div class="select">
        <select name="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel" selected>Opel</option>
            <option value="audi">Audi</option>
        </select>
    </div>

	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;
	}

Related recommendations:

css beautification with jquery select_jquery

css beautification, optimization, and merging tool recommendations_html/css_WEB-ITnose

js css to achieve select beautification effect_javascript skills

The above is the detailed content of How to beautify selection using pure css? Code implementation of css beautification select. For more information, please follow other related articles on the PHP Chinese website!