在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. LeetCode(67)题解: Add Binary

    https://leetcode.com/problems/add-binary/ 题目: Given two binary strings, return their sum (also a bin ...

  2. These interactions can be expressed as complicated, large scale graphs. Mining data requires a distributed data processing engine

    https://databricks.com/blog/2014/08/14/mining-graph-data-with-spark-at-alibaba-taobao.html

  3. swt_table 回车可编辑Esc取消

    package 宿舍管理系统; import java.util.Hashtable; import org.eclipse.swt.SWT; import org.eclipse.swt.custo ...

  4. td 中连续数字或连续英文内容不自动换行

    原因: 把连续的英文当做成了一个单词. 解决: 加上 : word-break: break-all (允许单词内换行)

  5. 关于UISearchBar

    iPhone开发之UISearchBar学习是本文要学习的内容,主要介绍了UISearchBar的使用,不多说,我们先来看详细内容.关于UISearchBar的一些问题. 1.修改UISearchBa ...

  6. FZU2150 Fire Game —— BFS

    题目链接:https://vjudge.net/problem/FZU-2150 Problem 2150 Fire Game Accept: 2702    Submit: 9240 Time Li ...

  7. jdk8新特性Stream

    Stream的方法描述与实例 1,filter  过滤 Person p1 = new Person(); p1.setName("P1"); p1.setAge(10); Per ...

  8. Linux 下WAS的java版本查看

    1.查找linux的详细版本号: A.cat /proc/version B.lsb_release -a(可以查出是否为redhat开发的) C.uname -a 2.Linux的java版本 A. ...

  9. Swagger测试工具

    http://www.360doc.com/content/16/0509/08/1355383_557462195.shtml

  10. I.MX6 Parallel RGB LCD Datasheet描述

    /******************************************************************** * I.MX6 Parallel RGB LCD Datas ...