前端一些常用的小技巧

公众号---人生代码

发布于 2021-01-12 14:46:45

3360

发布于 2021-01-12 14:46:45

文章被收录于专栏：人生代码

如何修改输入框占位字体样式

比如 ui 设计稿给定的输入框的占位字体样式是 #ccc;那么我们就需要修改占位字体的样式了，比如下面的 html 代码：

<input placeholder="请输入数字" />

具体的 css 样式如下：

input::-webkit-input-placeholder{
    color: #ccc;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color: #ccc;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color: #ccc;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color: #ccc;
}

如何修改 checkbox, radio 样式

就比如我们设计稿的样式跟原生的效果是不太一样的时候，这个时候我们就需要修改我们的 checkbox, radio 的样式了，利用CSS 修改input=radio的默认样式(改成选择框)：

<input id="item2" type="radio" name="item">
<label for="item2"></label>

css 样式如下：

input[type="radio"] {
     opacity: 0; //设置透明度，隐藏原有input样式
}
label {
     position: absolute;
     left: 90%;
     top: 10px;
     width: 20px;
     height: 20px;
     border: 1px solid #999;
}
input:checked+label { 
     // 相邻同胞选择器，选择被选中的input标签后  第一个label标签 ［input  和 label标签有共同的父元素］；
     background-color: #ff3334;
     border: 1px solid #ff3334;
}

css样式会应用在紧随着 "勾选的input元素" 后面（同级）的 " label元素的：after "上。也就是说，input框如果被用户勾选了，其后面的label元素会有相应的样式变化

input:checked+label::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 10px;
  top: 3px;
  left: 6px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

实现效果：