zoukankan      html  css  js  c++  java
  • element elinput 去掉边框

    element样式还是蛮好的,只是有时候我们需要做一些调整,比如,el-input 的边框,官网是这样子的

     我们需要去掉这个边框

    试了常用的:border: none;  以及:outline:none; 但却没用

    tip:将border属性设成0,虽然边框不见了,但是浏览器依然会对border-width和border-color进行渲染,会占用浏览器的资源。将border设置成none,浏览器就不会做出渲染动作。

    然后就就,就发现个好东西,>>> , >>> 是vue的深度选择器,vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过 >>> ,穿透scoped。

    tip:无任何依赖时,纯css写 >>> 是无效果哒

    那我们来看一下怎么操作这个 >>> ,要注意这里是 父级>>>el-input ,必须是这样,否则没有效果

    1 <div class="inputDeep">
    2     <el-input></el-input>
    3 </div>

    style这么写:

    1 <style>
    2 .inputDeep .el-input--medium .el-input__inner{
    3   border-top: none !important;
    4   border-left: none !important;
    5   border-right: none !important;
    6   border-radius: 0;
    7 }
    8 </style>
  • 相关阅读:
    js 读取XML
    JavaScript DOM 交换节点笔记
    JDBC学习总结 -- JDBC 快速入门 教程
    SQL 语句易错点讲解
    JAVA 他人博客收藏 (To be continue)
    <<MYSQL必知必会>> 入坑指南
    OpenGL 纹理学习总结
    BZOJ 3456 NTT图的计数 容斥
    洛谷1002 容斥原理+dfs OR DP
    51nod1565 FFT
  • 原文地址:https://www.cnblogs.com/lemperor/p/15672043.html
Copyright © 2011-2022 走看看