Html

<select class="sel_house_type">
<option value="0">请选择</option>
<option value="1">住宅</option>
<option value="2">别墅</option>
</select>

Css

.seltype select{ -webkit-appearance: none;height:.3rem;width:100%; padding-left:.1rem; appearance:none;background: url(../images/arrow.png) no-repeat center right;}

-webkit-appearance: none; 关键代码 css3属性

效果

-webkit-appearance: none;去处select默认小箭头样式的更多相关文章

  1. 修改select默认小箭头

    在html中select下拉框默认的小箭头是这样的 有时候我们需要把这种小箭头用更好看的图片代替,就需要改变样式了. html 代码如下: <select class="comm-se ...

  2. 图片-定义select向下箭头样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 【笔记】css 自定义select 元素的箭头样式

    原文链接:https://www.imooc.com/qadetail/187585?t=281881 最近项目需要自定义select 元素的样式,搜索了一下发现了通过设置select 元素 css ...

  4. select下拉箭头样式重置

    select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("../ima ...

  5. select自定义小三角样式

    这段代码是网上大部分的解决办法,在这里总结一下: 让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字居中的效果. <div class ...

  6. select下拉箭头改变，兼容ie8/9

    各个浏览器下select默认的下拉箭头差别较大,通常会清除默认样式,重新设计 <html> <head> <meta charset="utf-8"& ...

  7. 一个select元素自定义设计的新思路：appearance: none之后利用<>符号制造小箭头

    最近工作时解决了一个前端小问题(如下图所示):在Safari中,select的控件之上有不和谐的灰色部分. 刚开始时我以为是backgrand或是border设置不当之类产生的问题,在搜索了很久之后终 ...

  8. 如何修改select标签的默认下拉箭头样式？

    对于一般的项目而言,select标签在浏览器中表现出来的默认样式也不算丑,但是一次项目中,项目经理却要求对select标签本身进行样式修改,美化其下拉小箭头的样式.我思考和尝试了许多方法,最终得到一种 ...

  9. 如何把select默认的小三角替换成自己的图片

    不同的浏览器默认的select的选项图标是不同的,例如: 在chrome中,是这样的: 未点击时    点击时  在Firefox中是这样的: 未点击时  点击时   在IE9中是这样的: 未点击时  ...

随机推荐

  1. UVa 11426 (欧拉函数 GCD之和) GCD - Extreme (II)

    题意: 求sum{gcd(i, j) | 1 ≤ i < j ≤ n} 分析: 有这样一个很有用的结论:gcd(x, n) = i的充要条件是gcd(x/i, n/i) = 1,因此满足条件的x ...

  2. bzoj3555: [Ctsc2014]企鹅QQ

    将字符串hash.不难写.然而1.注意用longlong2.数组大小注意...3.似乎别人都用的unsigned long long ?. #include<cstdio> #includ ...

  3. 实现窗口逐渐增大(moveTo(),resizeTo(),resizeBy()方法)

    moveTo()方法格式:window.moveTo(x,y); 功能:将窗口移动到指定坐标(x,y)处; resizeTo()方法格式:window.resizeTo(x,y); 功能:将当前窗口改 ...

  4. css3的背景多重运用

    效果图: 简单代码: http://www.developerdrive.com/2013/08/introducing-css3-multiple-backgrounds/ 演示地址: http:/ ...

  5. The resource could not be loaded because the App Transport

    Xcode7 beta 网络请求报错:The resource could not be loaded because the App Transport Xcode7 beta 网络请求报错:The ...

  6. LeetCode Single Number (找不不重复元素)

    题意:给一个序列,序列中只有1个是单个的,其他都是成对出现的.也就是序列中有奇数个元素.要求找出这个元素. 思路:成对出现用异或最好了.两个同样的数一异或就变零,剩下的,就是那个落单的. class ...

  7. LeetCode: Interval

    (1)Merge Intervals https://leetcode.com/problems/merge-intervals/ Given a collection of intervals, m ...

  8. Table '.\mysql\proc' is marked as crashed and should be repaired 报错

    Table '.\mysql\proc' is marked as crashed and should be repaired 报错 解决方法: 找到mysql的安装目录的bin/myisamchk ...

  9. Android-AnimationDrawable（二）

    首先可以先定义一个逐帧播放的xml: <?xml version="1.0" encoding="utf-8"?> <animation-li ...

  10. Free Pascal的IDE界面乱码解决方法

    右击[Free Pascal]快捷图标,选[属性] [属性]窗口中,选择[选项]页,下拉[当前代码页(C)],选择[437 (美国)] 按[确定] 注意:[开始]菜单和桌面中的快捷图标都得设置.