CSS 常见问题

超、凢脫俗 2022-05-19 07:43 200阅读 0赞

1.input输入框点击有边框的解决办法  
点击输入的时候不需要input输入框有边框显示，例如按钮就不需要，如果设置了border-radius，在点击的时候还有边框就会超级丑。如何解决呢？  
给input 加一个`outline:none;` 就ok了  
2.input type 为file时移上去的样式  
H5的文件选中是非常常用的功能，但是通常来讲，会样式，类似如下  
![在这里插入图片描述][20190308104647783.png]  
当移上去设置为小手 `cursor: pointer`;，发现会有问题 ，小手的覆盖会不完全，有点地方仍保持原样式，这是因为原样式虽然隐藏，但是仍占位置，这时加一个 `font-size: 0;`就可以解决了。  
3.修改第三方UI的样式  
修改iview,element的样式，可以不加scoped直接修改，但是影响全局不可取，另一种就是在外面套个父盒子改，可以使用 >>> 深入穿透修改样式，但是sass不支持>>>，需要使用/deep/ 来穿透  
eg:

.tracts-info-wrappe >>> .el-dialog__footer {
        color: red;
      }
    .tracts-info-wrapper /deep/ .el-dialog__footer {
      margin-top: -20px;
    }

4.改变滚动条的样式  
box滚动的盒子

.box::-webkit-scrollbar{
        width: 8px;
        height: 5px;
        border-radius: 5px;
        background-color: #EAEAEA;
    }
    .box::-webkit-scrollbar-thumb{
        min: 5px;
        max: 10px;
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
        box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
        background: rgba(50, 50, 50, 0.2);
    }
     .box::-webkit-scrollbar-track{
        background-color: #EAEAEA;
        border-radius: 5px;
    }

[20190308104647783.png]: /images/20220519/02e8b20e49d44698ac9bbdcd84192f29.png

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是css呀 CSS常见问题技巧盘点

css是cascading style sheets的简称，中文译作“层叠样式表单”，实际上它是一组样式。你可能对css这个名词比较陌生，实际上无论你用internet e

快来打我*/ 2024年04月01日 13:34/ 0 赞/ 33 阅读

相关 CSS3常见问题列表布局js特效

[下载地址][Link 1] CSS3常见问题列表布局特效是一款通用的css3常见问题列表，标题内容展开收缩ui布局特效。 ![485ea70ec267d320315229

待我称王封你为后i/ 2022年09月16日 13:17/ 0 赞/ 161 阅读

相关 CSS若干常见问题小结

1.边框部分问题【边框为虚线】 border:1px dashed ddd; 【边框为实线】 border:1px solid

柔光的暖阳◎/ 2022年08月06日 10:07/ 0 赞/ 154 阅读

相关 CSS常见兼容性问题总结

本文有部分是从别的大神博客看来的，有部分是自己平时遇到的，一并写下来，当然肯定是不全的，欢迎大家补充 1、首先是div居中问题，通常写法为 <!DOCTYPE h

悠悠/ 2022年07月12日 03:27/ 0 赞/ 202 阅读

相关 CSS常见兼容性问题及解决方法

最近在研究浏览器兼容性问题，所以准备写篇愽客记录一下（会持续更新）；浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。我

r囧r小猫/ 2022年06月13日 23:36/ 0 赞/ 344 阅读

相关 CSS 常见问题

1.input输入框点击有边框的解决办法点击输入的时候不需要input输入框有边框显示，例如按钮就不需要，如果设置了border-radius，在点击的时候还有边框就会超

超、凢脫俗/ 2022年05月19日 07:43/ 0 赞/ 201 阅读

相关 CSS常见兼容性问题总结

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。这里谈到的浏览器，主要指IE6/IE7/IE… FireFox Chrome

女爷i/ 2022年04月17日 02:46/ 0 赞/ 266 阅读

相关 css 常见问题

隐藏滚动条并可以滚动内容 1.计算滚动条宽度并隐藏起来页面向右偏移一定的距离。可以使用绝对定位或者translate。 2.使用三个容器包围起来，不需要计算滚动条

Bertha 。/ 2022年03月18日 03:06/ 0 赞/ 231 阅读

相关 HTML CSS常见的小问题

相对路径：图像文件和HTML 文件位于同一文件夹：只需输入图像文件的名称即可，如< img src=“logo.gif " />。图像文件位于HTML 文件的

红太狼/ 2021年10月23日 09:45/ 0 赞/ 352 阅读

相关 css常见小问题（自己遇到的）

禁止div点击 ![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] //css属性： p

妖狐艹你老母/ 2021年10月16日 01:16/ 0 赞/ 281 阅读