前端样式修改心得
今天对公司项目登录页进行了修改。
项目登录页构成:头部和底部为公共模板页,中间部分为登录页自身所有。
鉴于此,中间部分因不用担心改动影响到其它页面,故最好改,不必细谈。对于头部和底部,首先借助浏览器调试工具找到关键元素及其选择器,再在浏览器上进行修改与测试(对于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;
}