整理一些用到确想不起来的css样式设置

这些是楼主本人在开发过程中遇到的一些的css样式问题,百度上也很容易查到,并没有说经常用,但是偶尔写到这些都要再问一次度娘,为了不在麻烦度娘,这次索性整理一下。

一、input  placeholder属性样式设置方式

html部分

整理一些用到确想不起来的css样式设置

css部分设置placeholder属性值的字体大小为1rem,其他样式设置与字体样式的设置方法一样。

input::-webkit-input-placeholder { /* WebKit browsers */
  font-size: 1rem;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  font-size: 2rem;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  font-size: 1rem;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  font-size: 1rem;
}

样式显示效果。

整理一些用到确想不起来的css样式设置

二、自定义checkbox

HTML部分

<input type="checkbox" id="myCheck">
<label for="myCheck"></label>

CSS部分

input{
  display: none;
}
#myCheck + label{
  background-color: white;
  border-radius: 50%;
  border:1px solid #11c692;
  background-color: #11c692;
  width:20px;
  height:20px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 20px;
  color: #fff;
}
#myCheck:checked + label{
  background-color: #11c692;
}
#myCheck:checked + label:after{
  content:"\2714";
}

三、首行缩进

text-indent:2em 

段落中文字首行缩进2个字符的距离

四、光标样式设置

cursor 属性规定要显示的光标的类型(形状)

整理一些用到确想不起来的css样式设置