<!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. mybatis 执行流程以及初用错误总结

    mappper 配置文件  头文件: 1.   <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" &q ...

  2. 解决linux安装软件：/lib/ld-linux.so.2: bad ELF interpreter: 没有那个文件或目录

    在linux系统中安装软件:/lib/ld-linux.so.2: bad ELF interpreter怎么解决 常用的安装因为系统软件位数问题,如:64位系统中安装了32位程序了, 是因为64位系 ...

  3. 技术派-github常见的一些用法和缩写

    PR: Pull Request. 拉取请求,给其他项目提交代码 LGTM: Looks Good To Me.  看起来不错,代码已 review,可以合并 SGTM: Sounds Good To ...

  4. Django面试集锦（1-50）

    目录 1.Django ORM查询中select_related和prefetch_related的区别? 2.only与defer的用法? 3.Django ORM是什么? 4.Django创建项目 ...

  5. jsp简单实现交互

    test.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...

  6. selenium高级应用 - 结束Windows中浏览器的进程

    结束Windows中浏览器的进程 #-*- coding:utf-8 #结束Windows中浏览器的进程 from selenium import webdriver import unittest ...

  7. HDU_1175_dfs

    http://acm.hdu.edu.cn/showproblem.php?pid=1175 dfs(x,y,i,num),xy表示位置,i表示方向,num表示转向次数,num=2时候的剪枝很重要. ...

  8. HDU6446 Tree and Permutation(树、推公式)

    题意: 给一棵N个点的树,对应于一个长为N的全排列,对于排列的每个相邻数字a和b,他们的贡献是对应树上顶点a和b的路径长,求所有排列的贡献和 思路: 对每一条边,边左边有x个点,右边有y个点,x+y= ...

  9. Leetcode题解 - 部分中等难度算法题解（56、957、825、781、1324、816）

    957. N 天后的牢房 思路: 模拟变换,当N天结合后返回 => 当N非常大的时候,超时 => 一般N很大的时候,这种题目必然存在循环,所以记录找过的状态,一旦出现已经访问过的状态可立即 ...

  10. 本地linux搭建的WordPress升级时需要输入FTP信息

    转自:https://blog.csdn.net/weixin_43837883/article/details/88751871 这是因为目录权限不正确所致 解决方法: 1.使用命令chown -R ...