<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>图片-定义select向下箭头样式</title>

     </head>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         .icon-select1 {

             width: 100%;

             line-height: 40px;

             cursor: pointer;

             /*鼠标上移变成小手*/

             appearance: none;

             /*去掉默认的下拉三角*/

             -moz-appearance: none;

             -webkit-appearance: none;

             background: url("../img/icon.png") no-repeat right center transparent;/* 下拉箭头图片 */

             background-size: 15px 10px;/* 下拉箭头大小 */

             /*添加下拉三角图标*/

         }

     </style>

     <body>

         <select class="icon-select1">

             <option value="">查看详情</option>

             <option value="">方形</option>

             <option value="">圆形</option>

             <option value="">锥形</option>

         </select>

     </body>

 </html>

图片-定义select向下箭头样式的更多相关文章

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

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

  2. <select>的下拉样式

    今天做一个专题,其中,select标签的样式要做成下图的模样,但是默认情况是下下图的模样: 如何实现呢,实现的办法竟然比我想象中的简单好多: select{ border: solid 1px #00 ...

  3. -webkit-appearance: none;去处select默认小箭头样式

    Html <select class="sel_house_type"> <option value="0">请选择</optio ...

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

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

  5. select自定义下拉三角符号,css样式小细节

    本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...

  6. 改变select箭头样式

    链接:https://blog.csdn.net/java_zhaoyanli/article/details/52549787 改变select箭头样式的方法: 1,去掉箭头: 2,设置图片为背景: ...

  7. 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头

    一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...

  8. 下拉框select中option居中样式

    下拉框select中option居中样式 text-align:center;text-align-last:center;

  9. 修改select默认小箭头

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

随机推荐

  1. Ecplise-SVN插件异常: 由于目标计算机积极拒绝，无法连接。

    在Ecplise中,选择team->share project时,出现以下异常 由于目标计算机积极拒绝,无法连接. svn: Unable to connect to a repository ...

  2. Java 设置Excel自适应行高、列宽

    在excel中,可通过设置自适应行高或列宽自动排版,是一种比较常用的快速调整表格整体布局的方法.设置自适应时,可考虑2种情况: 1.固定数据,设置行高.列宽自适应数据(常见的设置自适应方法) 2.固定 ...

  3. C++ 函数详解

    C++函数完全兼容C函数定义的风格,但是也做出了一些改进.一方面,C++函数允许使用缺省参数值和占位参数:另一方面,C++提供了重要的函数重载机制:另外,为了解决C中臭名昭著的宏缺陷问题,C++提供了 ...

  4. linux启动Firefox报错，及解决方法

    今天在安装Firefox时,出现如下错误 [root@localhost ~]# firefox XPCOMGlueLoad error for file /usr/lib64/firefox/lib ...

  5. 秒秒钟破解eval加密

    前言  准确的说eval处理过的代码应该叫做压缩代码,不过效果上算是加密过了一样!很多小伙伴不想直接让别人看到自己的js代码往往就会采取这样的处理措施.不过,其实这样的方法只能防御那些小白.对于真正的 ...

  6. DOCKER 学习笔记8 Docker Swarm 集群搭建

    前言 在前面的文章中,已经介绍如何在本地通过Docker Machine 创建虚拟Docker 主机,以及也可以在本地Windows 创建虚拟主机,也是可以使用的.这一节,我们将继续学习 Docker ...

  7. Markdown 教程

    Markdown 简介 Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档. Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建. ...

  8. Python 代码风格规范(Google)

    Python风格规范 分号 tip 不要在行尾加分号, 也不要用分号将两条命令放在同一行. 行长度 tip 每行不超过80个字符 例外: 长的导入模块语句 注释里的URL 不要使用反斜杠连接行. Py ...

  9. python 更改pip源

    用pip安装依赖包时默认访问https://pypi.Python.org/simple/,但是经常出现不稳定以及访问速度非常慢的情况,国内厂商提供的pipy镜像目前可用的有: http://pypi ...

  10. 题解 SP375 【QTREE - Query on a tree】

    \[ \texttt{Preface} \] 这题在 \(\text{Luogu}\) 上竟然不能交 \(C++\) ,会一直 \(Waiting\) ,只能交非 \(C++\) 的语言. 所以打完了 ...