<!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. kdevelop 是什么 什么鬼(windows系统非linux)

    这个软件尼玛 有懂的没,编译执行 1.需要gcc 2.需要啥怎么配置尼玛 3........................... 4.疯了都 大家懂得来说说

  2. springboot中使用自定义注解实现策略模式,去除工厂模式的switch或ifelse,实现新增策略代码零修改

    前言 思路与模拟业务 源码地址 https://gitee.com/houzheng1216/springboot 整体思路就是通过注解在策略类上指定约定好的type,项目启动之后将所有有注解的typ ...

  3. 共轭先验（conjugate prior）

    共轭是贝叶斯理论中的一个概念,一般共轭要说是一个先验分布与似然函数共轭: 那么就从贝叶斯理论中的先验概率,后验概率以及似然函数说起: 在概率论中有一个条件概率公式,有两个变量第一个是A,第二个是B , ...

  4. IDEA | 更改idea打开新项目默认配置

    背景 使用过idea的童鞋应该都发现,用idea打开一个新项目,总是需要重新配置一遍,它会使用系统默认配置,例如maven.JDK等设置. 解决方案 IDEA其实有个设置是可以更改新项目的默认配置,大 ...

  5. 编译调试 .NET Core 5.0 Preview 并分析 Span 的实现原理

    很久没有写过 .NET Core 相关的文章了,目前关店在家休息所以有些时间写一篇新的

  6. python中Threadlocal变量

    在多线程环境下,每个线程都有自己的数据.一个线程使用自己的局部变量比使用全局变量好,因为局部变量只有线程自己能看见,不会影响其他线程,而全局变量的修改必须加锁. 不加锁就会出现变量会被修改的问题,进而 ...

  7. Cheat sheet PySpark SQL Python（PySpark 速查表）

  8. ionic2的返回按钮的编辑问题

    ionic2 返回按钮 首先可以在 app.module.ts 文件中配置. @NgModule 中的 imports 属性的 IonicModule.forRoot 第二个参数,如下: IonicM ...

  9. MySQL的简介

    什么是数据库 1. 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同 的API(接口)用于创建,访问,管理,搜索和复制所保存的数据 2. 我们也可以将 ...

  10. 对特殊方法的访问 - Special method lookup

    对特殊方法的访问 - Special method lookup 对于用户自定义的 class 来说, 特殊方法只有通过定义对象的类型object’s type (而非通过 instance 的 __ ...