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

最新推荐文章于 2021-12-30 17:58:56 发布
最新推荐文章于 2021-12-30 17:58:56 发布
阅读量171 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhangrunhao/p/7519892.html
版权

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

记录一个坑

环境

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

问题

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

解决

  • 在input类型, 有提供针对此类型的伪元素, 可以进行隐藏
  • input为search类型解决方法

总结

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

伪元素继承问题

待完成

转载于:https://www.cnblogs.com/zhangrunhao/p/7519892.html

weixin_30809333
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue样式初始化_在vue中使用Normalize初始化样式
weixin_39823676的博客
12-28 586
安装使用Normalize首先安装normalize.css:npm i normalize.css --save-dev遇到的问题：import 'normalize.css'报错：原因没有安装：css-loader 和style-loadernpm install css-loader style-loader就解决了。在vue-cli中main.js中import 'normalize....
vue学习总结02
weixin_42282999的博客
03-06 1792
vue多选实现 {{role.name}} 注： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200306143421893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp...
取消input默认样式
weixin_34384557的博客
04-07 154
有时候input在页面中被聚焦后会出现默认的边框样式，可以通过以下方法取消去除 .input:focus{ outline: none;} 转载于:https://www.cnblogs.com/webwangjie/p/6679983.html
css--兼容input[type=search]的清除按钮的样式
yangxiaohui-home
11-21 1020
css--兼容input[type=search]的清除按钮的样式 /*--清除谷歌浏览器下的 search 叉号*/ input::-webkit-search-cancel-button { -webkit-appearance: none; position: relative; height: 15px; width: 15px; borde...
H5 input type=“search“ 不显示搜索 解决方法
Littleree的博客
08-23 397
H5 input type="search" 不显示搜索 解决方法
stylus之placeholder
qq_40002210的博客
03-23 815
利用stylus，简单的对input的placeholder的内容样式的修改，以便以后使用，以color为例：input_placeholder(prop,args) {prop} &::-webkit-input-placeholder color args {prop} &::-moz-placeholder color args...
web前端不用怕，外卖平台的项目开发流程，大全！！
weixin_53000915的博客
03-06 3130
项目开发流程 1. 创建客户端项目 1.1 使用 vue-cli(脚手架)搭建项目 #在Github新建Vue-MintShop项目,然后clone到本地 git clone git@github.com:W-Qing/Vue-MintShop.git cd Vue-MintShop #创建客户端项目 vue init webpack mintshop-client cd mintshop-client npm install npm run dev 访问: localhost:8080 1.2 项目结构
[yishen] 小慕读书web端学习笔记
yishen的博客
09-23 2768
课程常用链接 【前奏-课程】快速入门Web阅读器开发 【小慕读书web端】Vue 实战商业级读书Web APP 全面提升技能 【epub图书免费下载站点 · 中文书】http://www.ziliaoh.com/epub.html 【项目代码gitee】https://gitee.com/yishen_yishen/vue-ebook 如果对你有帮助欢迎点个 star 【md格式 源文档下载】下载链接 在线阅读可能会乱码(我知道是编码问题，但在七牛云里不知道怎么修改)，请下载后查看 阅读器原理课程-免
学习uni-app记录
qq_34821328的博客
12-30 710
小程序page.json全局配置 { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/workbench/workbench", "style": { // "navigationBarTitleText": "工作台", //下面的buttons内容会将其覆盖 "app-plus": { //App端扩展配置 "title
前端学习笔记
weixin_44360988的博客
10-30 1089
JS js对象是通过引用来传递的，我们创建的每个递归函数是在一个函数通过名字调用自身的情况下造成的 function factorial (num) { if (num <= 1) { return 1; } else { return num * factorial(num - 1); } } call apply bind继承 第二个参数不一样，call()第二个参数是数，apply()第二个参数是数组 模块化：公共&私有方法（闭包） 块级作用域（通常称为私有作用域）的匿名函
input改变search框默认清除X样式重写
weixin_30247307的博客
02-19 924
input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; position: relative; height: 15px; width: 15px; border-radius: 50%; background :#EBEBEB url("img/clear.png") no-repeat ...
stylus入门使用方法
热门推荐
求知若渴，虚心若愚，努力前行，未来可期。
05-22 1万+
stylus介绍是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS， SASS都在这方面做了一些贡献。Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS
vue中去除elementui组件自带的样式
L_WalkingPig的博客
09-25 8692
以el-card卡片组件为例： 总有个样式：padding:'20px'; 切样式来自于el-card__body的类名。 解决：在引用该组件的页面中重写即可 <style lang="scss" scoped> /deep/ .el-card__body{ padding: 0px 0px 10px 10px; } </style> ...
vue input框带搜索功能
weixin_43829905的博客
05-28 1万+
vue input框带收缩功能 Input输入框 <template> 名称: <el-autocomplete v-model="searchname" :fetch-suggestions="querySearchAsync" placeholder="请输...
HTML5去除input [type=search] 的默认边框和删除按钮
大爱无疆的博客
03-28 1万+
input [type=search]  是HTML新属性 ， 定义用于搜索的文本字段； x-webkit-speech  属性：在GOOGLE浏览器上  还会显示一个小话筒  autocomplete="off"  属性  关闭浏览器自动记录之前输入的值   webkit内核浏览器里 input 框类型如果是 type="search"
如何去除input标签点击之后出现的默认样式
yike_dc的博客
08-08 1万+
新项目刚刚开工碰上的第一个坑，记录一下，防止以后再踩进去~
input[type=search] onsearch事件触发及输入框自动消失
lianzhang861的博客
04-20 1万+
有时候在手机端想点击搜索框弹出的输入法中出现搜索按钮，点击搜索按钮执行搜索操作。使用H5的标签input ,type="search"&lt;input type="search" placeholder="搜索" onsearch="loadData()"&gt;注意这里时间触发用onsearch而不是onclick。function loadData(){ //让输入法消失 $("inpu...
vue：仿百度样式搜索框
魏知非的博客
02-25 4816
效果如图： html代码如下： &lt;div class="box"&gt; &lt;div class="searchBox"&gt; &lt;input type="text" v-model="keyword" placeholder="请输入关键词进行搜索" class="sea
Vue组件TagsInput深度解析：编辑框实现多标签功能
在Vue框架中实现这种组件的关键在于模拟多标签输入框的行为以及处理用户的输入事件。 首先，我们来看一下组件的基本结构。在HTML部分，通过模板语法创建了一个包含按钮和输入框的div，每个按钮表示一个标签，`v-for...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值