前端样式修改心得

Posted 2020-08-09 南韵

今天对公司项目登录页进行了修改。

项目登录页构成：头部和底部为公共模板页，中间部分为登录页自身所有。

鉴于此，中间部分因不用担心改动影响到其它页面，故最好改，不必细谈。对于头部和底部，首先借助浏览器调试工具找到关键元素及其选择器，再在浏览器上进行修改与测试（对于div层数较复杂的，只能靠猜）。若所要修改的元素属性已存在，且所需的值与其他页不同，则在当前页所在的html里对该元素属性重新定义即可。有时，因原元素属性权重较高，导致直接在html里进行定义后仍无效，则应在该属性值后叫‘!important’增加其权重。在此，若所需修改元素为仅有类选择器，且该类为某UI框架定义，则最好不要对其进行修改，可以给该元素添加ID选择器，在ID选择器里重新定义元素属性。因ID选择器的权重高于类选择器，所以一般情况，不需在元素属性值后添加‘!important’。

（以上部分简言之即：若要修改的内容为公共模板页，且修改效果仅为当前页所用，则将冲突的元素属性重新定义到当前页HTML里。若重新定义后，效果仍没变化，则考虑是否是权重引起，若是，在新定义的元素属性值后添加“!important”。“!important”能不用就不用，因为其可能引发新的权重问题.）

常见修改：

1.输入框只留下边框

input{

border-top:none;

border-left:none;

border-right:none;

border-bottom:1px solid black;

}

2.输入框无背景色（即透明）：

input{

background:transparent;

}

3.输入框点击时光标颜色值设置：

input：focuse{

color:white;

}

4.输入框placeholder颜色改变：

input::-webkit-input-placeholder {

     /* WebKit browsers */
     color: white !important;//添加 !important是为了增加其权重，在不知道权重如何的情况可以不添加，当发现不添加就没有效果的时候，就添加上吧
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
     color: white !important;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
     color: white !important;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
     color: white !important;
}