html小技巧总结(待续中。。。)

  1. select元素重置显示placeholder提示文字

    效果:开始默认显示placeholder,选择之后显示value,重置之后显示placeholder提示文字,修改的时候初始值为value

    关键点:重置之后的value需要置为undefined,并且要注意设置了value之后defaultValue不会生效

  2. 去除button的边框

    <style>
    	button {
    		border: none;
    		outline: none;
    	}
    </style>
    
  3. 设置滚动条样式
    下面是全局修改的写法

    /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
    
    ::-webkit-scrollbar {
      width: 12px;
      /*对垂直流动条有效*/
      height: 12px;
      /*对水平流动条有效*/
    }
    
    /*定义滚动条的轨道颜色、内阴影及圆角*/
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
      background-color: #E8E8E8;
      border-radius: 3px;
    }
    
    /*定义滑块颜色、内阴影及圆角*/
    ::-webkit-scrollbar-thumb {
      border-radius: 7px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
      background-color: #bbbbbb;
    }
    
    /*定义两端按钮的样式*/
    ::-webkit-scrollbar-button {
      background-color: cyan;
    }
    
    /*定义右下角汇合处的样式*/
    ::-webkit-scrollbar-corner {
      background: khaki;
    }
    

    如果需要局部修改样式的话

    css选择器::webkit-scrollbar

    // 修改.test元素的滚动条的宽度
    .test::-webkit-scrollbar {
      width: 0px;
    }
    
    // 修改其他的样式同理即可
    
  4. 关于透明度:opacity和rgba

    rgbaopacity
    身份属性值
    继承后代不会继承

    效果如图所示:第一个为opacity设置0.2,第二个rgba为(194, 227, 255, .2)
    在这里插入图片描述
    在这里我遇到一个问题还没有解决,就是使用opacity进行webpack打包的时候,值为百分比的时候,打包之后就变成了1%

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页