在vue组件的stylus样式中 取消search类型的input按钮中默认样式

记录一个坑

环境

  • Vue组件
  • 使用了Stylus的CSS风格.

问题

  • input输入框使用了 type="search"这种类型
  • 使用后发现, 输入内容后, 最后用个取消按钮,极其恶心, 见截图

解决

  • 在input类型, 有提供针对此类型的伪元素, 可以进行隐藏

总结

  • 开始时, 总结在input后面添加伪元素, 是无效的
  • 不清楚, 此问题原因, 有大神讲与伪元素的继承有关.
  • 看来, 应该总结下这一块了

伪元素继承问题

待完成

在vue组件的stylus样式总 取消search类型的input按钮中默认样式的更多相关文章

  1. input按钮去掉默认样式

    border: 1px solid transparent; //自定义边框 outline: none; //消除默认点击蓝色边框效果

  2. 移动端去掉按钮button默认样式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. 【转】html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017 ...

  4. html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式 1.时间选择的种类: HTML代码: 选择日期:<input type="date" value="20 ...

  5. iOS中默认样式修改－b

    项目中有大量的UITableView都需要显示sectionHeader.iOS中默认sessionHeader上的textLabel样式跟设计图不符. 按照我们之前的解决方案,是在每个UITable ...

  6. input时间表单默认样式修改（input[type="date"]）

    一.时间选择的种类: HTML代码:选择日期:<input type="date" value="2018-11-15" /> 选择时间:<i ...

  7. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  8. input框改变默认样式

      input[type="radio"] { width: 2rem; height: 2rem; -webkit-appearance: none; /*清除复选框默认样式*/ ...

  9. input选择框默认样式修改

    input选择框是无法直接修改样式,我们只能间接来改变它样式. 原理:用图片来代替原来的input选择框,原来的input选择框定位到图片上方并让它opacity为0,鼠标点击时用js来改变图片,这样 ...

随机推荐

  1. Iterator && Iterable Collection && Map

    Java集合类库将集合的接口与实现分离.同样的接口,可以有不同的实现. Java集合类的基本接口是Collection接口.而Collection接口必须实现Iterable接口. 以下图表示集合框架 ...

  2. 状态模式-State

    状态模式:当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式结构图: 代码实现:

  3. java的自定义异常类

    编写自定义异常类的模式 编写自定义异常类实际上是继承一个Exception标准异常类,用新定义的异常处理信息覆盖原有信息的过程.常用的编写自定义异常类的模式如下: public classCustom ...

  4. inheritance super overrides printMethod in Superclass override重写父方法

    Core Java Web Page http://horstmann.com/corejava.html [ inheritance ] package v1ch05.inheritance; im ...

  5. nginx搭建支持http和rtmp协议的流媒体server之中的一个

    实验目的:让Nginx支持flv和mp4格式文件,支持RTMP协议的直播和点播:同一时候打开RTMP的HLS功能 ​资料:HTTP Live Streaming(缩写是 HLS)是一个由苹果公司提出的 ...

  6. Dom解析XMl文档

    XMl文档 <?xml version = "1.0" encoding = "UTF-8"?> <books> <book bo ...

  7. Scrapy运行报错：ModuleNotFoundError: No module named 'douban.douban'

    运行scrapy爬虫报错: from douban.douban.items import DoubanItem ModuleNotFoundError: No module named 'douba ...

  8. 为什么越来越多公链项目将WASM拥入怀中？

    最近越来越多的项目开始转向VNT使用的WASM,像EOS.Ontology,包括最初引入虚拟机EVM运行智能合约环境的以太坊,最近也开始转向使用WASM. 什么是WASM? WASM ,全称:WebA ...

  9. html5--6-60 阶段练习7-下拉菜单

    html5--6-60 阶段练习7-下拉菜单 学习要点 综合运用所学过的知识完成一个下拉菜单的小练习,加深对学过知识点的综合应用能力. <!DOCTYPE html> <html l ...

  10. receive和process的过程

    (一) receive最终在fuse_kern_chan.c中的fuse_kern_chan_receive函数实现,使用系统调用读取 res = read(fuse_chan_fd(ch), buf ...