自定义select 小三角

最新推荐文章于 2022-09-29 18:18:35 发布
最新推荐文章于 2022-09-29 18:18:35 发布
阅读量231 收藏
点赞数
原文链接：http://www.cnblogs.com/qianxuebing/p/9835096.html
版权

把select小三角换成自己的图片

效果：

css样式：

<style>
        #my_select {
            display: flex;
            display: -webkit-flex;
            width: 120px;
            font-size: 24px;
            padding: 0 5px;
            margin: 20px auto;
            outline: none;
            border: 1px solid #00DD00;
            appearance: none;
            /* 兼容Chrome */
            -webkit-appearance: none;
            background: url(Images/xia.png) no-repeat right center;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            color: #FF5511;
        }
    </style>

HTML：

<body>
    <select name="" id="my_select">
        <option value="0">苹果</option>
        <option value="1">香蕉</option>
        <option value="2">橘子</option>
    </select>
</body>

　　

转载于:https://www.cnblogs.com/qianxuebing/p/9835096.html

denghous8817
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义select 三角样式
东方佑
05-10 12万+
select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/st
select自定义下拉三角符号,css样式小细节
weixin_30485379的博客
08-10 1416
本来没有写文章的习惯，但是闲下来了，整理资料，发现还挺纠结，对前端来说。所以整理下，希望对看到的人有所帮助，毕竟我不是前端开发。 起因，是前端告诉我select 框的三角箭头不能自定义。但是第二次的时候，以我自己的感觉中，是可以自己定义的，于是网上找到了这部分资料。 然后自己分享处理吧。 知道大家都喜欢完整的demo,所有直接粘贴吧。 <!DOCTYPE html&g...
select自定义小三角样式
weixin_33905756的博客
01-17 188
这段代码是网上大部分的解决办法，在这里总结一下： 让select透明，上面加一个span，来替换select框，可以自定义小三角样式，也可以做出select文字居中的效果。 　　　　　　　　　&lt;div class="ui-select"&gt; &lt;span&gt;使用加息券或现金券 &lt;i class="icon-down lMar10"&...
select自定义小三角样式代码（实用总结）
12-29
这段代码是网上大部分的解决办法，在这里总结一下： 让select透明，上面加一个span，来替换select框，可以自定义小三角样式，也可以做出select文字居中的效果。 　　　　<div class=ui-select> <span>使用加息券或现金券 <i class=icon-down></i></span> <select name= id=> <option value=10元现金券>10元现金券</option> <option value=20元现金券>20元现金券</option>
select清除右侧的小三角
蜗牛的专栏
08-17 9816
关于这个select清除右侧的小三角 在网上找了众多方法 无外乎 用个宽度较窄的div标签包围 select标签 然后让select标签 overflow:hidden; 这样基本上就可以实现select标签的隐藏三角了 今天偶然发现还有另一种方法 其中用到了CSS3的高级属性 不懂CSS3的盆友  赶紧恶补一下吧 select{ -webkit-appearance: none;
xm-select相关文件
最新发布
07-23
在阅读提供的文档内容时，我们了解到`xm-select`是一款基于JavaScript的自定义下拉选择组件。它提供了丰富的配置选项和灵活的功能扩展性，允许开发者根据实际需求定制不同的交互效果。本文将详细介绍`xm-select`的...
js实现下拉框效果（select）
12-04
总结起来，这个示例展示了如何用纯JS和CSS实现一个自定义的下拉框效果，而不是依赖浏览器原生的`<select>`标签。通过这样的方式，可以更灵活地控制样式和交互行为，同时提供一致的跨浏览器用户体验。在实际开发中，...
为ion-select添加图片
03-09
1.ionic中的ion-select标签添加图片 2.ion-select有四种显示方式，四种添加图片的代码示列 3.通过这个实列，你会在ionic中灵活应用css样式；还会学到javaScript的一些知识（如：获取Dom节点、获取html元素、自定义...
自己修改select的样式（修改select右边的小三角）
p312011150的博客
09-18 2338
select {     /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/     border: solid 1px #000;        /*很关键：将默认的select选择框样式清除*/     appearance:none;     -moz-appearance:none;     -webkit-appearance:none;     
修改select下拉小三角样式为图片
徊忆羽菲
09-29 744
修改select下拉小三角样式为图片
去掉select自带的小三角和边框
m15017460350的博客
03-28 2800
1.去掉select自带的小三角和边框     设置select的边框为0px,背景设成透明(background: transparent;),这时候你会看到边框没有了,但是小三角还是在的.    再在select外面加个div,固定死div的宽度,并且加超出隐藏属性(overflow: hidden;)再设置select的宽度,大于div的宽度,小三角会隐藏掉.
如何把select默认的小三角替换成自己的图片
weixin_30593261的博客
12-29 721
不同的浏览器默认的select的选项图标是不同的，例如： 在chrome中，是这样的： 未点击时 点击时 在Firefox中是这样的： 未点击时点击时 在IE9中是这样的： 未点击时点击时 其它浏览器大家可以自己尝试看看select的默认样式 下面开始正式介绍怎么替换： 这是我的html代码： <div> 　　<select id="m...
html三角形下拉列表,select自定义小三角样式代码（实用总结）
weixin_34512894的博客
06-03 2474
这段代码是网上大部分的解决办法，在这里总结一下：让select透明，上面加一个span，来替换select框，可以自定义小三角样式，也可以做出select文字居中的效果。使用加息券或现金券 10元现金券20元现金券30元现金券40元现金券.ui-select{width:75%;height:63px;line-height:63px;background-color:#ECAFB4;color:...
这是初始化selete 和input 的小技巧 对于ie浏览器
weixin_30826761的博客
05-15 210
select{ /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border:solid1px#000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; ...
css去掉select边框和小三角
热门推荐
谢彬のCSDN专栏
06-16 3万+
.row select { border: 0; display: block; position: relative; min-height: 1.146667rem; line-height: 1.146667rem; white-space: nowrap; width: 100%; overflow: hidden; padding-right: .6rem; ba
antd select 下拉菜单的 style 属性_手把手教你实现vue下拉菜单组件
weixin_39751453的博客
02-03 2777
这篇文章我们一起来实现一个vue的下拉菜单组件。像这种基本UI组件，网上已经有很多了，为什么要自己实现呢？其实并不是有意重复造轮子，而是想通过这个过程回顾一下vue组件开发的一些细节和注意事项。为什么选择下拉菜单组件？因为：麻雀虽小五脏俱全，这个小小的组件涉及到了不少vue组件开发的知识点。好了，那就开始吧！首先创建一个vue-cli的项目，笔者用的是vue-cli3，创建过程略，然后创建一个vu...
css select 添加的三角图标可点击
weixin_34409822的博客
08-08 317
在使用select元素时，时常在其后跟随一个三角下拉图标，当该图标因为定位在select元素之上，不能点击，测试肯定过不了，所以总结下解决方案： html <div class="input citySelect"> 　　<select> 　　　　<option>上海市</option> 　　　　<option>北京市&lt...
select标签如何调整右边的原生小三角位置
05-31
原生的select标签右边的小三角的位置无法通过CSS直接调整。不过，你可以通过一些技巧来模拟出一个自定义样式的select标签，从而实现调整小三角的位置。这种方法一般使用div来模拟select标签，然后使用ul和li来模拟下拉选项，最后用JavaScript来实现下拉功能。 以下是一个简单的示例： HTML代码： ``` <div class="custom-select"> <div class="select-trigger"> <span>选项1</span> <i class="arrow"></i> </div> <ul class="options"> <li>选项1</li> <li>选项2</li> <li>选项3</li> </ul> </div> ``` CSS代码： ``` .custom-select { position: relative; width: 200px; } .select-trigger { position: relative; display: block; background-color: #fff; border: 1px solid #ccc; padding: 5px 30px 5px 10px; cursor: pointer; } .select-trigger span { display: inline-block; vertical-align: middle; } .arrow { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 0; height: 0; border-top: 6px solid #666; border-right: 6px solid transparent; border-left: 6px solid transparent; } .options { position: absolute; top: 100%; left: 0; display: none; z-index: 1; margin: 0; padding: 0; list-style: none; background-color: #fff; border: 1px solid #ccc; } .options li { padding: 5px 10px; cursor: pointer; } .options li:hover { background-color: #f5f5f5; } ``` JavaScript代码： ``` var selectTrigger = document.querySelector('.custom-select .select-trigger'); var options = document.querySelector('.custom-select .options'); selectTrigger.addEventListener('click', function() { options.style.display = options.style.display === 'none' ? 'block' : 'none'; }); options.addEventListener('click', function(event) { selectTrigger.querySelector('span').textContent = event.target.textContent; options.style.display = 'none'; }); ``` 这个示例中，使用一个div元素来模拟select标签，其中.select-trigger类表示模拟的select标签的触发器，.arrow类表示模拟的小三角。通过调整.arrow类的right属性来调整小三角的位置。下拉选项使用ul和li元素来模拟，通过JavaScript来实现下拉功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值