改变select组件默认样式及option背景色

最新推荐文章于 2024-08-19 21:44:19 发布
最新推荐文章于 2024-08-19 21:44:19 发布
阅读量5w 收藏 11
点赞数 2
分类专栏： WEB前端 CSS3 浏览器兼容问题 文章标签： 清除select样式 设置select样式 设置option背景色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyn1772671980/article/details/79815417
版权

1.清除select组件原有样式

-webkit-appearance: none;   /* google */
-moz-appearance: none;  /* firefox */
appearance: none;       /* IE */

2.设置新样式及option背景色

 

background: #080F17 url(../../common/image/triangel.png) no-repeat scroll right center;
 

 

3.效果如下图所示
 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  麦兜_冰夕
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
plsql 复制表结构到指定表空间_MySQL数据库教程-数据表的创建与复制

				
			

			

				

					weixin_39853131的博客
				

				

					11-21
					
					1401
					
				

			

		

		

			
				
数据表的复制与创建数据表Table是实现数据存储与管理的基础，也是使用数据库技术进行数据存储的核心对象之一。本节主要介绍数据表的定义、表的复制等语法与实例。(课程配套视频教程请关注后查阅视频资源)。创建数据表基本语法MySQL数据库管理系统使用SQL结构化查询语法实现对数据表进行创建。数据表创建主要包括数据表名字的确定、字段属性的定义与约束的设置等。数据表创建的基本语法描述如下：创建数据表语法其中...

			
		

	



                

              
                



	

		

			

				
					
css修改select选择框option被选中的背景颜色_前端开发，五个有用的 CSS 属性

				
			

			

				

					weixin_39672194的博客
				

				

					11-29
					
					6064
					
				

			

		

		

			
				
分享一些容易忽略的CSS属性，在此之前，没有人告诉我这些属性的存在。也许你们和我不一样，已经了解了这些属性，让我们一起来看看。闲话少说，让我们进入正题吧：1、禁用用户选中一个元素(element)的文本使用属性user-select，并且将它的值设置为none，我们可以将一个元素的文本设置为不能被用户选中。element {  -webkit-user-select: none; /* Safar...

			
		

	



                


  
              

                


	

		

			

				
					
这篇Bootstrap下拉列表select详细讲解和使用，你看不明白，来给我差评

					
热门推荐

				
			

			

				

					岩浆李的游鱼
				

				

					07-20
					
					1万+
					
				

			

		

		

			
				
前言： 本人是多年Android开发，从0开始学习web前端。同样发现很多博客基本都是拷贝和复制，还说的不清楚。所以把我觉得目前博客上写不清的，着重写下。再学习完vue框架后，学习原生官网开发，但是学习到Bootstrap的select时，觉得网上资料都是迷迷糊糊不清的，很让初学者迷惑。故有此篇。

前提条件
当然了这里我们要引入Bootstrap和jQuery
    <script type="text/javascript" src="./js/jquery-3.6.0.js"></

			
		

	





	

		

			

				
					
如何更改select option边框颜色和选中的颜色

					
最新发布

				
			

			

				

					ZDFXN的博客
				

				

					08-19
					
					214
					
				

			

		

		

			
				
【代码】如何更改select option边框颜色和选中的颜色。

			
		

	



		

			
		



	

		

			

				
					
css修改select选择框option被选中的背景颜色_这五个有用的 CSS 属性完全被我忽视了...

				
			

			

				

					weixin_39603505的博客
				

				

					11-29
					
					1506
					
				

			

		

		

			
				
作者 |Desiré译者 |苏本如，责编 | 郭芮头图 | CSDN 下载自视觉中国出品 | CSDN(ID：CSDNnews)以下为译文：各位网友，大家好！?今天，我想在这里和大家分享一些我很晚时候才知道的一些CSS属性，在此之前，没有人告诉我这些属性的存在。也许你们和我不一样，已经了解了这些属性。闲话少说，让我们进入正题吧：?禁用用户选中一个元素(element)的文本使用属性u...

			
		

	





	

		

			

				
					
vue实现给select框的option设置不同的背景颜色并根据背景颜色置灰对应的option选项

				
			

			

				

					m0_53682699的博客
				

				

					11-21
					
					1309
					
				

			

		

		

			
				
需求：不同的背景颜色对者不同的状态。用户需要点击select框就能直观看到option各选项代表的状态，并根据背景颜色置灰对应的option选项。思路：用forEach给该select框的list数组的每一项添加item.color和item.disabled。小伙伴们，你写的功能实现了吗？

			
		

	





	

		

			

				
					
css修改select选择框option被选中的背景颜色_web前端入门到实战：CSS实现开关按钮三例...

				
			

			

				

					weixin_39929635的博客
				

				

					11-24
					
					436
					
				

			

		

		

			
				
我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbox，并在提交表单后获取checkbox值，以查看用户是否已经选中或取消选中该checkbox。我们都知道默认的的checkbox长啥样，而且还不能通过纯CSS的方式来设置checkbox的样式。这种元素的...

			
		

	





	

		

			

				
					
定制html的select标签样式

				
			

			

				

					04-13
				

			

		

		

			
				
在网页设计中，HTML的`<select>`标签用于创建下拉菜单，但其默认样式往往较为简单，不能满足设计师们对界面美观度的需求。本文将详细介绍如何通过自定义CSS和JavaScript来改变`<select>`标签的样式，打造更加个性化...

			
		

	





	

		

			

				
					
select 分组下拉菜单自定义样式

				
			

			

				

					06-07
				

			

		

		

			
				
在`css`文件中，你可能会看到对`.custom-select`、`.dropdown-menu`、`.optgroup`和`.option`等类的定义，用来设置背景色、边框、字体、间距等样式。`js`文件则可能包含处理点击事件、显示和隐藏下拉菜单、处理选中...

			
		

	





	

		

			

				
					
HTML5 SELECT元素的高级CSS3样式

				
			

			

				

					04-04
				

			

		

		

			
				
1. **边框和背景**：使用`border`、`background-color`和`background-image`属性可以改变下拉框的边框样式和背景颜色或图像。  2. **圆角**：`border-radius`属性可使SELECT元素的边角变得圆润。  3. **阴影效果**：...

			
		

	





	

		

			

				
					
css 设置下拉列表 select 样式

				
			

			

				

					03-16
				

			

		

		

			
				
当涉及到交互式的表单元素时，如下拉列表`<select>`，CSS的运用就显得尤为重要，因为它可以帮助我们定制默认样式，提升用户体验。本文将详细探讨如何使用CSS设置下拉列表`<select>`及其选项`<option>`的样式。  首先...

			
		

	





	

		

			

				
					
下拉组件select2 4.0版本js&css;

				
			

			

				

					03-06
				

			

		

		

			
				
- **主题定制**：Select2提供多种预设主题，如经典（'classic'）和Bootstrap（'bootstrap'），也可以自定义样式覆盖默认样式。 - **占位符样式**：通过`.select2-selection__placeholder`选择器设置占位符的颜色、...

			
		

	





	

		

			

				
					
这五个有用的 CSS 属性完全被我忽视了

				
			

			

				

					LuckyWinty的博客
				

				

					09-18
					
					185
					
				

			

		

		

			
				
作者 |Desiré译者 |苏本如，责编 | 郭芮出品 | CSDN（ID：CSDNnews）以下为译文：各位网友，大家好！????今天，我想在这里和大家分享一些我很晚时候才知道的一...

			
		

	





	

		

			

				
					
css显示内容越来越模糊_55个提高你CSS开发效率的必备片段

				
			

			

				

					weixin_39631350的博客
				

				

					11-20
					
					276
					
				

			

		

		

			
				
(给JavaScript加星标，提升我的前端技能.)作者：Eno_Yaohttps://github.com/Wscats/CV/issues/2这篇文章会记录我们平时常用到的 CSS 片段，使用这些 CSS 可以帮助我们解决许多实际项目中遇到的问题，强烈建议点赞收藏再看，方便日后查找。清除浮动浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也...

			
		

	





	

		

			

				
					
你可能还不知的 7 个 CSS 好用的属性

				
			

			

				

					粉丝们务必加入微信粉丝群
				

				

					04-28
					
					696
					
				

			

		

		

			
				
学习CSS是构建好看网页的一种方式。但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。因此，...

			
		

	





	

		

			

				
					
css 透明度_如何使用CSS实现精美视频片头制作

				
			

			

				

					weixin_39960019的博客
				

				

					11-29
					
					248
					
				

			

		

		

			
				
借助CSS所提供的动画效果，旋转效果除了能够制作动画及网页页面元素，如按钮之外，还可以使用CSS实现精美的动态片头的制作。本文主要介绍CSS与HTML实现精美的动画片头制作实例。如何使用CSS实现精美片头制作CSS动态片头设计实例本例设计使用烟雾粒子效果与动态文本结合，实现动态片头效果，文字内容随着烟雾而动态生成、展示，案例最终效果要求描述如下：动态片头实现效果描述本例设置实现动态效果描述如上图所...

			
		

	





	

		

			

				
					
css 右对齐_你可能还不知的 7 个 CSS 好用的属性

				
			

			

				

					weixin_39769767的博客
				

				

					11-29
					
					433
					
				

			

		

		

			
				
学习CSS是构建好看网页的一种方式。 但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。 毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。因此，在这篇文章中，向你介绍7个 比较少见且好用的 CSS 属性，希望对你有所帮助。1. vertical-alignCSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（tab...

			
		

	





	

		

			

				
					
【第 235 期】这些 CSS 伪类，你可能还不知道，可以用起来了！

				
			

			

				

					粉丝们务必加入微信粉丝群
				

				

					06-03
					
					838
					
				

			

		

		

			
				
css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。这篇文章...

			
		

	





	

		

			

				
					
CSS开关按钮三例

				
			

			

				

					weixin_34409741的博客
				

				

					06-04
					
					429
					
				

			

		

		

			
				
我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbox，并在提交表单后获取checkbox值，以查看用户是否已经选中或取消选中该checkbox。我们都知道默认的的checkbox长啥样，而且还不能通过纯CSS的方式来设置checkbox的样式。这种元素的...

			
		

	





	

		

			

				
					
select下拉框鼠标经过时改变option背景颜色

				
			

			

				

					04-07
				

			

		

		

			
				
可以通过CSS的:hover伪类来实现下拉框鼠标经过时改变option背景颜色的效果。

首先，需要给select和option元素设置对应的样式：

```css
select {
  /* 设置select的样式 */
}

option {
  /* 设置option的样式 */
}
```

然后，使用:hover伪类来设置鼠标经过时的样式：

```css
option:hover {
  background-color: #ccc;
}
```

完整的代码如下：

```html
<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>

<style>
  select {
    width: 200px;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  option {
    padding: 5px;
  }

  option:hover {
    background-color: #ccc;
  }
</style>
```

效果如下图所示：


![select下拉框鼠标经过时改变option背景颜色效果图](https://i.imgur.com/5ZfLSDH.png)

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
麦兜_冰夕

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值