• 技术文章 >web前端 >前端问答

    怎样给select添加css样式

    青灯夜游青灯夜游2022-01-20 17:54:03原创899

    添加方法:1、给select标签添加id或class属性并设置属性值;2、在head标签对中嵌入style标签对;3、在style标签对中,使用“#id值{css属性:值;}”或“.class值{css属性:值;}”语句来添加css样式。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    html中给select添加css样式

    实现代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<style type="text/css">
    			#select{
    				background-color: #000000;
    				color: white;
    				width: 100px;
    				height: 30px;
    			}
    			.select{
    				background-color: pink;
    				color: white;
    				width: 100px;
    				height: 30px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<select id="select">
    		  <option value ="volvo">Volvo</option>
    		  <option value ="saab">Saab</option>
    		  <option value="opel">Opel</option>
    		  <option value="audi">Audi</option>
    		</select>
    		<select class="select">
    		  <option value ="volvo">Volvo</option>
    		  <option value ="saab">Saab</option>
    		  <option value="opel">Opel</option>
    		  <option value="audi">Audi</option>
    		</select>
    	</body>
    
    </html>

    1.png

    (学习视频分享:css视频教程

    以上就是怎样给select添加css样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html select css样式
    上一篇:css中段落边框如何设置 下一篇:完全掌握JavaScript执行机制
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• html5中弹性盒是什么意思• html中next是什么意思• html怎样设置div横向滚动条不显示• html5与xml的区别是什么• javascript和html5的区别有哪些• html怎样设置textarea不换行显示
    1/1

    PHP中文网