<!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. VMware workstation 虚拟网络 三种上网区别

    以VMware workstation为例,其虚拟网络设备有3种: 第一种:vmnet0(桥接模式),无实体虚拟网卡,其实就是一个协议而已,会在对应网卡上加入VMware bridge protoco ...

  2. RSYNC 同步工具

    Rsync 数据同步工具 一.Rsync简介 1.检测一下你的机器上是否已经安装  --->可以通过yum安装  或者  源码 Server  192.168.201.151 Client    ...

  3. vue中如何在本地导入js文件

    import {setStore,setUser,getStore,removeStore} from "../../../public/localstory" 在导入js文件时, ...

  4. 练习2-13 求N分之一序列前N项和 (15 分)

    练习2-13 求N分之一序列前N项和 (15 分) 输入在一行中给出一个正整数N. 输出格式: 在一行中按照“sum = S”的格式输出部分和的值S,精确到小数点后6位.题目保证计算结果不超过双精度范 ...

  5. shell命令之一天一见

    一.在统计行数时常要用的到命令包括 w.c.l, 在这里做个简单的介绍. 语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同时也 ...

  6. Golang设置https访问，以及http如何重定向到https

    设置https访问: 原始代码为http监听: func main() { server := &http.Server{ Addr: ":8080", ... } go ...

  7. Go语言实现：【剑指offer】调整数组顺序使奇数位于偶数前面

    该题目来源于牛客网<剑指offer>专题. 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和 ...

  8. 07-SpringMVC01

    今日知识 1. SpringMVC入门 2. SpringMVC的注解开发 SpringMVC入门 1. 简介: * Spring MVC是Spring提供的一个强大而灵活的web框架.借助于注解,S ...

  9. javascript 完全正确的数据库indexedDB

    //indexedDB var dbName = 'whx', version = '1', dbTableName = 'bbg', request, db, conCls, updateKey, ...

  10. mount.nfs: Stale file handle的解决方法

    在NFS客户端挂载rpc共享服务的时候出现这个问题 # mount -t nfs 192.168.20.6:/data /mnt mount.nfs: Stale file handle 原因是当cl ...