select原样式:

进行样式修改后的样式:

 

附上修改代码:

//select外面必须包裹一个div,用来覆盖select原有的样式 <div class="option">
        <select name="">
          <option value=" ">筛选实验类型</option>
          <option value="实验1">实验1</option>
          <option value="实验2">实验2</option>
        </select>
      </div>


css:

 .option{  /*用div的样式代替select的样式*/ margin: 100px;
   width: 140px;
    height: 40px;
    /*border-radius: 5px;*/ /*盒子阴影修饰作用,自己随意*/ /* box-shadow: 0 0 5px #ccc;*/
    border: 1px solid #cccccc;
    position: relative;
  }
  .option select{ /*清除select的边框样式*/ border: none; /*清除select聚焦时候的边框颜色*/ outline: none; /*将select的宽高等于div的宽高*/ width: 100%;
    height: 40px;
    line-height: 40px; /*隐藏select的下拉图标*/ appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; /*通过padding-left的值让文字居中*/ padding-left: 20px;
  } /*使用伪类给select添加自己想用的图标*/ .option:after{
      content: "";
      width: 14px;
      height: 8px;
      background: url(/assets/arrow-down.png) no-repeat center; /*通过定位将图标放在合适的位置*/ position: absolute;
      right: 20px;
      top: 41%; /*给自定义的图标实现点击下来功能*/ pointer-events: none;
    } 

 但是有个问题;option的样式没办法修改;我各种百度搜索,没有搜索出如何修改其样式;

 因为option是html固有元素;因而无论怎么修改在浏览器上都是不起作用的。

想修改option样式,只能通过div ul li模拟select功能;

我项目是用vue做的,所以我基于vue对select用div li进行改造。

用div ul li做的select下来框:

实现的代码如下:

<div class="divInput"> <div class="input" @click="openValue"> <input v-model="value" type="text" placeholder="筛选实验类型"> <img src="../assets/arrow.png" alt=""> </div> <div class="list" v-show="show"> <ul> <li @click="getvalue(index,item)" v-for="(item,index) in tableData" :key="item.index">{{ item.name }}</li> </ul> </div> </div> js: export default {
    name: 'javascript',
    data(){
      return{
        tableData:[
          {
            'name':111
          },
          {
            'name':222
          },
          {
            'name':333
          }, {
            'name':444
          }
        ],
        show:false,
        value:''
      }
    },
    methods: {
      openValue(){
        this.show=!this.show;
      },
      getvalue(index,item){
        this.value=item.name;
        this.show=false;
      },
    }, css: .divInput{
  margin: 200px;
}
  ul li{
    list-style: none;
  }
  .input{
    width: 140px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    border: 1px solid #cccccc;
    position: relative;
  }
  .input input{
    border: none;
    outline: none;
    width: 90%;
  }
  .input img{
    position: absolute;
    right: 34px;
    top: 48%;
  }
  .list{
    width: 150px;
    border: 1px solid #cccccc;
    overflow: hidden;
  }
  .list ul li{
    width: 100%;
    height: 30px;
    cursor: pointer;
    line-height: 30px;
    padding-left: 10px;
  }
  .list ul li:hover{
    background-color: #cccccc;
  }

 

这样就可以完成对select样式的修改了。

嘿嘿,开心!

select下拉框option的样式修改的更多相关文章

  1. React html中使用react的两种方式

    基本使用<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content=......

  2. select下拉框option的样式修改

    select原样式:进行样式修改后的样式: 附上修改代码://select外面必须包裹一个div,用来覆盖select原有的样式 <div class="option"><select name=""><option valu......

  3. html5以及jQuery实现本地图片上传前的预览代码实例讲解

    html5以及jQuery实现本地图片上传前的预览,效果类似如下: 选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css样式没有复制,自己随意发挥)<!DOCTYPE html> <html> <head> <title......

  4. 如何在vue中使用HTML 5 拖放API

    拖放 API 将可拖动元素添加到 HTML,使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项目管理工具,使用户可以从头到尾直观地管理项目。 Trello、Pivotal Tracker 和 Jira 等工具都属于看......

  5. 网页小实验——用canvas生成精灵动画图片

    实验目标:借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片,不借助其他图片处理工具,不引用其他库只使用原生js实现。初始图片如下:一、图片分割将初始图片分割为六张大小相同的棋子图片1、html舞台:1 DOCTYPE html> 2 <html lan......

  6. input标签checkbox选中触发事件的方法

    1.方法一function checkboxOnclick(checkbox){ if ( checkbox.checked == true){ //Action for checked }else{ //Action for not checked }} 2.方法二$('#allSelect'......

  7. HTML5与CSS3知识点总结

    HTML常用标签总结 手摸手带你学CSS 好好学习,天天向上本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star?????????? 原文链接:https://blog.csdn.net/weixin_43461520/articl......

  8. HTML5中的Web Notification桌面通知

    一、传统的通知实现通知可以说是web中比较常见且重要的功能,私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈,这个时候,就需要页面给予即使的通知。在以前,我们的通知实现主要是通过闪烁页面的标题内容来实现,实现原理其实很简单,就是定时器不断修改document.titl......

随机推荐

  1. python 实现客户端与服务端的通信

    函数介绍Socket对象方法:服务端:函数描述.bind()绑定地址关键字,AF_INET下以元组的形式表示地址。常用bind((host,port)).listen()监听TCP,可以挂起的最大连接数,该值至少为1,一般设为5即可.accept()被动接受TCP客户端的连接客户端:函数描述.con......

  2. python中编写函数并调用的知识点总结

    能够调用自己编写的函数,这在很多开发语言中,都会用到一个叫做mian的主函数,这个函数一般都是程序的入口,当程序启动时,首先执行这个函数。在Python中,main函数的主要作用就是你写的模块既可以导入到别的模块中用,也可以在模块本身执行使用。下面就来了解具体使用操作吧。编写简单的函数并调用:def......

  3. MySQL创建数据库并支持中文字符的操作方法

    我们首先看一下MySQL官方文档:5.7CREATE {DATABASE | SCHEMA} [IF NOT EXISTS] db_name[create_option] ...create_option: [DEFAULT] {CHARACTER SET [=] charset_name| COL......

  4. jquery文本框内容改变事件

    /** * 内容改变时并不会触发事件,但是在失去焦点的时候会触发。*/$("#inputid").change(function(){ console.log($(this).val());});/** * 只要文本类容发生改变,就会触发该事件 */$("#inp......

  5. Java中的CPU占用高和内存占用高的问题排查

    下面通过模拟实例分析排查Java应用程序CPU和内存占用过高的过程。如果是Java面试,这2个问题在面试过程中出现的概率很高,所以我打算在这里好好总结一下。1、Java CPU过高的问题排查举个例子,如下:package com.classloading;public class Test {sta......

  6. 删除这些Windows文件和文件夹以释放磁盘空间

    Windows 包含大量您不需要的文件和文件夹。在隐藏的缓存,浪费空间的旧垃圾以及可以删除以实际解决问题的文件之间,要知道从 Windows 中安全删除哪些内容可能是一个挑战。今天就逐步介绍一些完全可以安全删除的 Windows 文件和文件夹,以及为什么要删除它们。这将帮助您释放磁盘空间并了解有关计......

  7. 原生JavaScript实现轮播图

    本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下效果:代码:* {margin: 0;padding: 0;}ul,li {list-style: none;}.banner {width: 1200px;height: 535px;border: 1px so......

  8. Python数据结构-集合

    1.集合"""集合(set):没有重复元素且没有顺序的数据结构定义语法:s = set({}) #空集合s = set({1, 2, 3, 4, 5})增加:add() 往集合添加一条数据update() 合并,支持传入列表、字典、元......

  9. ASP.NET Core 3.1 中间件

    参考微软官方文档 :https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/middleware/?view=aspnetcore-3.1一、ASP.NET Core 中间件简介1.1 定义:中间件是一种装配到应用管道以处理请求和响应的软件......

  10. R语言 实现手动设置xy轴刻度

    在R中,plot函数作图时会自动给出xy轴的刻度标度,如下图:有时我们需要自己定义xy轴的刻度,这时我们可以用axis中的at和labels参数来更改。首先,我们先令plot不要画出xy轴的标度然后,用axis函数设置xy轴的刻度这样xy轴的刻度就完全按照我们自己的意愿显示了,也可以设置at参数不是......