修改select边框颜色

最新推荐文章于 2023-06-26 17:38:41 发布
最新推荐文章于 2023-06-26 17:38:41 发布
阅读量2.7k 收藏 1
点赞数
分类专栏： 入坑解决方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hdn_kb/article/details/105412765
版权 
<span style="border:1px solid #B2D1D5;position:absolute; overflow:hidden;margin-top: -13px;height:18px;	"> 
	<select id="userName" name="userName" class="selectId" datatype="*" style="margin:-2px;width:165px;">
		<option value="0"></option>
	   	<option value="1">AAA</option>
	   	<option value="2">BBB</option>
	   	<option value="3">CCC</option>
	 </select>
</span>

1、首先使用margin:-2来隐藏select本身的边框

2、添加select的父节点span， 并甚至span的边框样式

通过以上两点设置即可改变select边框的颜色/

 

 

hdn_kb
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select标签边框的颜色select标签边框的颜色
04-19
select标签边框的颜色select标签边框的颜色
修改select标签的默认边框颜色
Yaqing_568的博客
08-07 7152
select标签是一种特殊的控件，他的默认边框颜色没法直接修改。 当要修改边框颜色时，在select标签外面先套一层div，先把select的边框隐藏掉，再修改div的边框来伪装成select边框。 下面是转自https://blog.csdn.net/kongjiea/article/details/38019839的实现代码 &lt;!DOCTYPE html PUBLIC "-//W3...
select 边框颜色改变
热门推荐
杨前露的博客
12-12 1万+
工作中经常遇到这种需求：select不用默认样式，而是改变其默认的样式 比如select默认有个边框 有个下拉箭头。布局代码：<span class="tesu_select"> <select> <option>5</option> <option>10</option>
定义select的边框颜色
11-30
具体步骤：     1.用margin属性实现。先设置margin属性为-2，以隐藏select对象原来的边框，然后设置select对象的父对象的边框。 <span u00a0style=”border:1px solid #333333;width:80″> <select style=”margin:-2;width:84;background:#eeeeee”>  <option u00a0value=”1″>1</option>  <option u00a0value=”2″>2</option>  <option u00a0value=”3″>3</option>  <option u00a0value=”4″>4</option>
如何定义select的边框颜色
yanick技术博客
04-28 2724
如何定义select的边框颜色 解决思路： 学习了clip和margin属性的用法，利用它们的特点，很容易就得出答案。 具体步骤：     1.用margin属性实现。先设置margin属性为-2，以隐藏select对象原来的边框，然后设置select对象的父对象的边框。   1  2  3  4  5    2.margin属性结合clip属性实现。也是先用margin隐藏selec
select2修改后的文件
最新发布
11-08
在修改后的文件中，可能包含了对Select2默认样式的调整，如颜色、字体、边框、背景、悬停效果等。开发者可能根据项目需求进行了个性化定制，以更好地融入到网站的整体设计中。例如，调整了搜索框的宽度、高亮选项的...
mui select hml安卓仿写
04-30
1. **外观样式**：MUI的`select`会采用更符合移动端设计规范的样式，例如使用圆角、阴影、颜色等元素，使其看起来更加接近原生应用的样式。在安卓设备上，这可能会包括自定义的下拉箭头图标、边框和背景色等。 2. *...
select默认样式美化代码兼容移动端和pc端
09-25
`）和调整字体大小、颜色等。这样，我们就可以自由地应用我们自己的CSS样式。此外，为了实现全宽布局并适应不同屏幕尺寸，使用了`width:100%`和`-webkit-box-sizing:border-box;box-sizing:border-box;`，确保元素的...
select下拉选择不同状态
09-23
本文将深入探讨如何实现一个“select下拉选择不同状态”的功能，这通常用于提供更丰富的用户体验，例如根据不同的选项状态展示不同的颜色。 标题中的“select下拉选择不同状态”指的是在HTML的`<select>`元素中，每...
select 边框颜色等样式的改变
qq_41353397的博客
11-21 382
css代码： outline: none; border: none; -webkit-appearance: none;*/这个是去除下箭头的 color: #277de2;
自定义select 并修改默认颜色
yangmy_Shy的博客
05-21 1293
css: .subLblSelect { position: relative; display: inline-block; } .subLblSelect select { padding-left: 16px; width: 372px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; border: 1px solid #E1E4E9; he
修改select 下拉默认选中项的颜色
weixin_47793882的博客
06-26 1175
参考:https://blog.csdn.net/weixin_39907729/article/details/85273738。
select边框颜色修改兼容样式
yaoyanzhu的博客
10-28 412
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
修改select边框颜色 兼容ie
kongjiea笔记
07-21 8808
无标题文档 1 2 3 4 5
修改 el-select 下拉框的背景颜色
半兽先生的博客
04-24 6061
组件的一个属性，用于指定弹出层的 CSS 类名。通常，它被用来自定义下拉列表的样式。这个 CSS 类应用到下拉弹出层中。因此，您可以在您的 CSS 文件或。类的样式，以更改下拉列表的外观（例如背景颜色、字体颜色等）。添加 popper-class="dropdown"例如，以下是一个示例样式，它为具有。在 Vue.js 中，
html实现边框颜色渐变,渐变边框的实现方式
weixin_30990605的博客
06-15 3670
前言我们在 css 里可以直接使用 border 属性指定元素的边框，但这样的方法具有局限性，就是只能添加单色的边框，如果需要给元素添加渐变的边框，又该如何实现呢？利用 border-imagebutton.btn {display: inline-flex;align-items: center;justify-content: center;cursor: pointer;user-selec...
element-ui的select边框颜色
07-27
根据引用\[2\]中的代码，可以通过设置输入框的边框属性来修改element-ui的select边框颜色。在样式中使用/deep/选择器来修改输入框的样式，具体代码如下： ```scss <style lang="scss" scoped> /deep/ .el-input__inner { border: 1px solid #e43179; // 设置边框颜色为#e43179 } </style> ``` 通过将上述代码添加到你的项目中，你可以修改element-ui的select边框颜色为指定的颜色。 #### 引用[.reference_title] - *1* *2* *3* [(Select)解决：Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化...](https://blog.csdn.net/weixin_43405300/article/details/124534512)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值