<!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. JDK源码之String类解析

    一 概述 String由final修饰,是不可变类,即String对象也是不可变对象.这意味着当修改一个String对象的内容时,JVM不会改变原来的对象,而是生成一个新的String对象 主要考虑以 ...

  2. Exception | java.security.NoSuchProviderException: no such provider: BC

    背景 今天在用PGP key做JWT签名和验签的时候,转换报了如下错误: org.bouncycastle.openpgp.PGPException: exception on setup: java ...

  3. 学习记录（安装Scala）

    安装完spark之后根据教程安装Scala,在安装的时候提出警告,等了好长时间之后发现无法下载,最后搜索之后发现1.8版本的jdk无法安装,今天又重装了jdk换成了1.7.0的openjdk jdk安 ...

  4. nginx命令行及演示：重载、热部署、日志切割

    重载配置文件 nginx -s reload 热部署(升级nginx) 首先备份二进制文件 cp nginx nginx.old  拷贝新版本的nginx替换以前的nginx二进制文件 cp  ngi ...

  5. Docker 代理脱坑指南

    Docker 代理配置 由于公司 Lab 服务器无法正常访问公网,想要下载一些外部依赖包需要配置公司的内部代理.Docker 也是同理,想要访问公网需要配置一定的代理. Docker 代理分为两种,一 ...

  6. Python 语言规范(Google)

    Python语言规范 Lint tip 对你的代码运行pylint 定义: pylint是一个在Python源代码中查找bug的工具. 对于C和C++这样的不那么动态的(译者注: 原文是less dy ...

  7. CCF_201509-1_数列分段

    水. #include<iostream> #include<cstdio> using namespace std; int main() { ]; cin >> ...

  8. 安装symfony3.4的坑，也是PHP7.3的经典坑之解决办法

    对于刚入手symfony3.4的同学,肯定会发现,安装symfony后部署后看到的往往不是hello world,也不是symfony的欢迎页面,而是给你一个下马威,唉,给你来个bug开开胃. 当然这 ...

  9. 创建一个JavaWeb工程

    1.用到的工具:eclipse编译器+Tomcat9,在自己电脑上已配置好jdk和tomcat的环境变量 2.新建一个project 2.选择web文件中的Dynamic Web project,进入 ...

  10. Apache 日志记录相关设置

    小编最近在配置Apache 服务器啊 就把遇到的信息给记录下来 Apache 自动生成的日志会给系统带来很大的损耗.关闭日志以后,甚至最高可以提高整体性能近40%(粗略估计) 那么如何关闭日志呢? 可 ...