html下拉框去掉箭头,解决select样式新方法，去除下拉箭头 及漂亮的下拉列

最新推荐文章于 2022-11-07 09:17:40 发布
最新推荐文章于 2022-11-07 09:17:40 发布
阅读量1.1k 收藏
点赞数
文章标签： html下拉框去掉箭头

class="box1">

class="box2">

name=inout class="select1">

value="出库"

selected>出库

value="入库">入库

value="调入">调入

value="调出">调出

/p>

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

青蛙实战之用JS+CSS和图片美化下拉列表选择框(select)-JS特效学院|Jsweb8.cn

body{

font-size:12px; margin:0

}

.wenzi{ float:left; height:20px; line-height:20px}

#age_sel_1

div.tag_select{display:block;color:#000;width:62px;height:22px;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 0;padding:0 10px;line-height:22px;}

#age_sel_1

div.tag_select_hover{display:block;color:#000;width:62px;height:22px;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 -22px;padding:0 10px;line-height:22px;}

#age_sel_1

div.tag_select_open{display:block;color:#000;width:62px;height:22px;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 -44px;padding:0 10px;line-height:22px;}

#age_sel_1

ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat left bottom;padding:0 0 1px;margin:0;width:60px;}

#age_sel_1 ul.tag_options li{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

repeat-y -102px 0;display:block;width:61px;padding:0

10px;height:22px;text-decoration:none;line-height:22px;color:#000;}

#age_sel_1 ul.tag_options li.open_hover{background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 -88px;color:#000}

#age_sel_1 ul.tag_options li.open_selected{background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 -66px;color:#19555F}

#age_sel_2

div.tag_select{display:block;color:#000;width:62px;height:22px;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 0;padding:0 10px;line-height:22px;}

#age_sel_2

div.tag_select_hover{display:block;color:#000;width:62px;height:22px;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 -22px;padding:0 10px;line-height:22px;}

#age_sel_2

div.tag_select_open{display:block;color:#000;width:62px;height:22px;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 -44px;padding:0 10px;line-height:22px;}

#age_sel_2

ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat left bottom;padding:0 0 1px;margin:0;width:60px;}

#age_sel_2 ul.tag_options li{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

repeat-y -102px 0;display:block;width:61px;padding:0

10px;height:22px;text-decoration:none;line-height:22px;color:#000;}

#age_sel_2 ul.tag_options li.open_hover{background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 -88px;color:#000}

#age_sel_2 ul.tag_options li.open_selected{background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 -66px;color:#19555F}

#area_sel_1

div.tag_select{display:block;color:#000;width:82px;height:22px;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif")

no-repeat 0 0;padding:0 10px;line-height:22px;}

#area_sel_1

div.tag_select_hover{display:block;color:#000;width:82px;height:22px;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif")

no-repeat 0 -22px;padding:0 10px;line-height:22px;}

#area_sel_1

div.tag_select_open{display:block;color:#000;width:82px;height:22px;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif")

no-repeat 0 -44px;padding:0 10px;line-height:22px;}

#area_sel_1

ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif")

no-repeat left bottom;width:100px;padding:0 0

1px;margin:0;width:80px;}

#area_sel_1 ul.tag_options li{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif")

repeat-y -102px 0;display:block;width:61px;padding:0

10px;height:22px;text-decoration:none;line-height:22px;color:#000;}

#area_sel_1 ul.tag_options li.open_hover{background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif")

no-repeat 0 -88px;color:#000}

#area_sel_1 ul.tag_options li.open_selected{background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif")

no-repeat 0 -66px;color:#19555F}

#area_sel_2

div.tag_select{display:block;color:#000;width:62px;height:22px;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 0;padding:0 10px;line-height:22px;}

#area_sel_2

div.tag_select_hover{display:block;color:#000;width:62px;height:22px;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 -22px;padding:0 10px;line-height:22px;}

#area_sel_2

div.tag_select_open{display:block;color:#000;width:62px;height:22px;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 -44px;padding:0 10px;line-height:22px;}

#area_sel_2

ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat left bottom;padding:0 0 1px;margin:0;width:60px;}

#area_sel_2 ul.tag_options li{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

repeat-y -102px 0;display:block;width:61px;padding:0

10px;height:22px;text-decoration:none;line-height:22px;color:#000;}

#area_sel_2 ul.tag_options li.open_hover{background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 -88px;color:#000}

#area_sel_2 ul.tag_options li.open_selected{background:transparent

url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif")

no-repeat 0 -66px;color:#19555F}

-->

var selects = document.getElementsByTagName_r('select');

var isIE = (document.all &&

window.ActiveXObject &&

!window.opera) ? true : false;

function $(id) {

return document.getElementByIdx(id);

}

function stopBubbling (ev) {

ev.stopPropagation();

}

function rSelects() {

for (i=0;i

selects[i].style.display = 'none';

select_tag = document.createElement('div');

select_tag.id = 'select_' +

selects[i].name;

select_tag.className =

'select_box';

selects[i].parentNode.insertBefore(select_tag,selects[i]);

select_info = document.createElement('div');

select_info.id =

'select_info_' + selects[i].name;

select_info.className='tag_select';

select_info.style.cursor='pointer';

select_tag.appendChild(select_info);

select_ul = document.createElement('ul');

select_ul.id = 'options_' +

selects[i].name;

select_ul.className =

'tag_options';

select_ul.style.position='absolute';

select_ul.style.display='none';

select_ul.style.zIndex='999';

select_tag.appendChild(select_ul);

rOptions(i,selects[i].name);

mouseSelects(selects[i].name);

if (isIE){

selects[i].onclick = new

Function("clickLabels3('"+selects[i].name+"');window.event.cancelBubble

= true;");

}

else if(!isIE){

selects[i].onclick = new

Function("clickLabels3('"+selects[i].name+"')");

selects[i].addEventListener("click", stopBubbling, false);

}

}

}

function rOptions(i, name) {

var options = selects[i].getElementsByTagName_r('option');

var options_ul = 'options_' + name;

for (n=0;n

option_li = document.createElement('li');

option_li.style.cursor='pointer';

option_li.className='open';

$(options_ul).appendChild(option_li);

option_text =

document.createTextNode(selects[i].options[n].text);

option_li.appendChild(option_text);

option_selected = selects[i].options[n].selected;

if(option_selected){

option_li.className='open_selected';

option_li.id='selected_' +

name;

$('select_info_' +

name).appendChild(document.createTextNode(option_li.innerHTML));

}

option_li.onmouseover = function(){

this.className='open_hover';}

option_li.onmouseout = function(){

if(this.id=='selected_' +

name){

this.className='open_selected';

}

else {

this.className='open';

}

}

option_li.onclick = new

Function("clickOptions("+i+","+n+",'"+selects[i].name+"')");

}

}

function mouseSelects(name){

var sincn = 'select_info_' + name;

$(sincn).onmouseover = function(){

if(this.className=='tag_select') this.className='tag_select_hover';

}

$(sincn).onmouseout = function(){

if(this.className=='tag_select_hover') this.className='tag_select';

}

if (isIE){

$(sincn).onclick = new

Function("clickSelects('"+name+"');window.event.cancelBubble =

true;");

}

else if(!isIE){

$(sincn).onclick = new Function("clickSelects('"+name+"');");

$('select_info_' +name).addEventListener("click", stopBubbling,

false);

}

}

function clickSelects(name){

var sincn = 'select_info_' + name;

var sinul = 'options_' + name;

for (i=0;i

if(selects[i].name ==

name){ if( $(sincn).className

=='tag_select_hover'){

$(sincn).className ='tag_select_open';

$(sinul).style.display = '';

}

else if( $(sincn).className

=='tag_select_open'){

$(sincn).className = 'tag_select_hover';

$(sinul).style.display = 'none';

}

}

else{

$('select_info_' +

selects[i].name).className = 'tag_select';

$('options_' +

selects[i].name).style.display = 'none';

}

}

}

function clickOptions(i, n, name){

var li = $('options_' + name).getElementsByTagName_r('li');

$('selected_' + name).className='open';

$('selected_' + name).id='';

li[n].id='selected_' + name;

li[n].className='open_hover';

$('select_' + name).removeChild($('select_info_' + name));

select_info = document.createElement('div');

select_info.id = 'select_info_' + name;

select_info.className='tag_select';

select_info.style.cursor='pointer';

$('options_' +

name).parentNode.insertBefore(select_info,$('options_' +

name));

mouseSelects(name);

$('select_info_' +

name).appendChild(document.createTextNode(li[n].innerHTML));

$( 'options_' + name ).style.display = 'none' ;

$( 'select_info_' + name ).className = 'tag_select';

selects[i].options[n].selected = 'selected';

}

window.onload = function(e) {

bodyclick = document.getElementsByTagName_r('body').item(0);

rSelects();

bodyclick.onclick = function(){

for (i=0;i

$('select_info_' +

selects[i].name).className = 'tag_select';

$('options_' +

selects[i].name).style.display = 'none';

}

}

}

style="margin:10px auto; width:349px; border:#ccc dotted

5px">

align="right" cellpadding="0" cellspacing="0">

height="30">

class="wenzi">·

我要找：

class="zhao">

type="radio" class="isco" id="sex" value="1"/>

女士

checked="checked" />

男士

checked="checked"/>

有照片

class="wenzi">· 年

龄：

id="age_sel_1">

id="age_select1">

value="18">18

>28

>38

>48

>58

>68

>78

>88

>98

width="6%">到

id="age_sel_2">

id="age_select2">

value="18">18

>28

>38

>48

>58

>68

>78

>88

>98

class="wenzi">· 地

区：

id="area_sel_1">

id="area_select1">

value="北京">北京

>上海

>武汉

>南京

>广州

无量山居士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS怎么去掉select的下拉箭头样式
12-13
本文将详细介绍如何通过CSS来去掉`select`元素的下拉箭头样式，并提供一个具体的代码示例。 首先，我们需要理解CSS中的`appearance`属性。这个属性允许我们改变一个元素的默认外观，使其看起来像浏览器内置的控件。...
html中下拉列表去除默认下拉箭头
qq_58689599的博客
10-14 358
可以在selsect的css加入appearance: none;
html下拉框去掉箭头,select 下拉框默认箭头怎么去掉【原创】
weixin_39637979的博客
06-03 1994
开始前来一波复制粘贴(来源于www.baidu.com)：select {/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/border: solid 1px #000;/*很关键：将默认的select选择框样式清除*/appearance:none;-moz-appearance:none;-webkit-appearance:none;/*在选择框的最右侧中间显示小箭头图...
html select更改箭头样式,下拉列表-select样式css处理，可改变箭头的颜色
weixin_34200416的博客
06-19 2313
下拉列表-select样式css处理，可改变箭头的颜色2018-11-26css处理下拉列表.IN {BORDER-RIGHT: #afaeae 1px solid; BORDER-TOP: #afaeae 1px solid; FONT-SIZE: 10pt; BORDER-LEFT: #afaeae 1px solid; COLOR: #7b7b7b; BORDER-BOTTOM: #afae...
html select 箭头样式修改,【笔记】css 自定义select 元素的箭头样式
weixin_35558751的博客
06-03 292
7个你可能不认识的CSS单位众所周知CSS技术我们虽然很熟悉,在使用的过程却很容易被困住,这让我们在新问题出现的时候变得很不利.随着web继续不断地发展,对于新技术新解决方案的要求也会不断增长.因此,作为网页设计师和前端开发人员 ...Yii源码阅读笔记(四)所有控制器action的基类yii\base\Action.php namespace yii\base;//定义的命名空间 use Yii...
html下拉选中添加箭头,html – 自定义选择下拉箭头不可点击
weixin_28762271的博客
06-03 574
我正在使用以下代码来自定义我的选择下拉箭头：HTML：...CSS：span.selectWrapper {position: relative;display: inline-block;width:65px;}span.selectWrapper select {display: inline-block;padding: 4px 3px 3px 5px;margin: 0;font: inh...
下拉框select样式改写具体实现
09-25
总结一下，这个例子通过CSS和HTML的结合，展示了如何自定义下拉框select的样式，包括去除默认边框、设置自定义背景和边框颜色、以及使用图片作为下拉箭头。这种方法允许开发者在不失功能性的前提下，提高网页的美观...
select级联下拉列表
06-19
在网页设计中，"select级联下拉列表"是一种常见的交互元素，用于创建省市区选择、类别层级展示等场景。这种技术通常结合JavaScript（JS）、HTML5和jQuery库来实现，使得用户能够在多个下拉菜单之间进行联动选择，...
CSS自定义select下拉选择框不用其他标签模拟且兼容多数浏览器
09-25
通常，纯CSS方法无法完全覆盖浏览器默认样式，尤其是涉及到下拉箭头和边框等细节。然而，通过一些技巧和额外的HTML元素，可以达到一定的自定义效果，虽然可能不适用于所有浏览器。 首先，我们可以通过将`select`...
jQuery下拉框美化插件selectList.rar
05-24
5. **可扩展性**：作为一款插件，selectList允许开发人员通过自定义事件和方法来扩展其功能，例如添加新选项、实时更新下拉框内容等。 6. **API接口**：selectList提供了一系列的API接口，包括初始化、选项操作、...
select默认箭头的修改
笑到世界都狼狈的博客
04-21 3236
select下拉列表框在各大浏览器中的默认样式不一样，所以在这里统一的对其进行修改 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> ...
html原生select改造箭头及文字左右居中的一种办法
热门推荐
dreamer2020的专栏
05-01 1万+
使用过原生select做网页开发的人，一定会对select的两个问题痛心疾首，一是箭头没办法使用css改造，二是显示文字没办法居中。 首先，如果你有足够时间的话，请改用jquerymobile。jquerymobile提供了移动端非常强大的各种控件定制。 select除了基本css改造外，还支持选项的分组，多选等各种样式。 其次，使用div模拟，网上有较多的使用div+css模拟select的
html5下拉菜单清除样式,jQuery自定义下拉框选择列表 5款炫酷样式 | HTML5资源教程...
weixin_29044157的博客
06-03 216
这是一款基于jQuery的自定义下拉框选择列表插件，利用这款我们对其中一个的实现代码进行简单讲解，代码主要由HTML、CSS和jQuery组成。HTML代码：CSS代码：.wrapper-dropdown-2 { /* Size and position */ position: relative; /* Enable absolute positionning for children and ...
html内链框如何取消下拉框,HTML学习笔记（二）body标签
weixin_29479863的博客
06-07 430
本系列适合作为HTML的复习文档。本章为body标签下的各种内容，主要参考来源：0 小常识0.1 块元素&行内元素块元素(block)；(1)独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；(2)块元素内部可以容纳其他块元素或行元素；行内元素(inline)；(1)可以与其他行内元素位于同一行；(2)行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；1...
去掉el-select中的小箭头+option太长省略...
qq_46344419的博客
11-07 2378
去掉el-select中的下拉和小箭头
HTML select标签去除箭头
@旅程的博客
03-15 3977
加入样式：        -webkit-appearance: none;
html select 下拉箭头隐藏
weixin_30802171的博客
03-16 975
html select 下拉箭头隐藏 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .width5...
html + css去掉 select默认下拉箭头和边框
qiqilovehcy的博客
12-27 3241
#selected{ width: 100%; height: 100%; background-color: #f54545; color: white; /* 去掉三角 */ appearance:none; -moz-appearance:none; /* 兼容Firefox */ -webkit-appearance:none; /* 兼容Safari 和 Chrome */ /* 去掉边...
html select 修改默认箭头样式,自定义select标签箭头样式
weixin_42509616的博客
06-04 1322
select::-ms-expand{ display: none; }//ie样式清除select{appearance:none;-moz-appearance:none;-webkit-appearance:none;background: url("/uploadfiles/images/alliance/xiala@2x.png") no-repeat scroll 480px cent...
el-select下拉框去掉箭头
最新发布
06-01
要去掉el-select下拉框的箭头，可以通过以下两种方式实现： 1. 使用CSS样式 ```css .el-select .el-input__suffix { display: none; } ``` 2. 使用el-select组件的props 在el-select组件中设置props的值，将箭头隐藏起来。 ```html <el-select placeholder="请选择" :arrow-show="false"> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="选项3" value="option3"></el-option> </el-select> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值