在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. 序列化模块 json pickel shelve

    一.json  模块 1.定义 将字典.列表等内容转换成字符串的过程就是序列化. 操作的数据类型有限,但是可以支持所有编程语言操作. 2.为什么要有序列化? 1.以某种存储形式使自定义对象持久化. 2 ...

  2. Mysql性能优化笔记

    一,索引 1.Innodb索引使用的是B+树 2.尽量简化where条件,比如不要出现 where id + 3 = 5,这无法使用索引 3.索引很大时,可以冗余一列来模拟哈希索引 4.小的表不需要使 ...

  3. hadoop的一般端口使用

  4. 深入解析Hibernate核心接口

    Hibernate有很多值得学习的地方,这里我们主要介绍Hibernate核心接口,包括介绍SessionFactory接口.Query和Criteria接口等方面. Session 接口对于Hibe ...

  5. 在C/C++中使用VLD检测内存泄漏

    VLD地址:https://kinddragon.github.io/vld/ 若出现内存泄漏,VS输出窗口会有如下提示: 若要确定造成内存泄漏的代码位置,仅需进入工程属性->链接器->调 ...

  6. 设置Android Studio工程布局文件的默认布局

    每次创建新的工程后,布局文件的的布局总是ConstraintLayout,如何更改? 进入Android Studio安装目录,用文本编辑器打开文件plugins\android\lib\templa ...

  7. MySQL alter语句

    1:删除列 ALTER TABLE [表名字] DROP [列名称] 2:增加列 ALTER TABLE [表名字] ADD [列名称] INT NOT NULL  COMMENT '注释说明' 3: ...

  8. elasticsearch索引查询，日志搜素

    索引查询 http://10.199.137.115:9200/_cat/indices?format=json 返回json字符串的索引状态 增加索引名称过滤 http://10.199.137.1 ...

  9. bzoj3957: [WF2011]To Add or to Multiply

    gay队牛逼! 我们可以强行拆一下柿子,最终得到的值会是m^k*x+m^k*u(k)*a+m^k-1*u(k-1)*a……m^0*u(0)*a 其中u表示后面有i个m的a有多少个 答案就是k+∑u 枚 ...

  10. YTU 2878: 结构体--学生信息排序

    2878: 结构体--学生信息排序 时间限制: 1 Sec  内存限制: 128 MB 提交: 297  解决: 148 题目描述 定义存放一个学生信息的结构体类型,学生信息包括:姓名,学号,性别,院 ...