2021-1-25表单元素美化

美化表单元素

一些新的伪类元素

focus

• 元素聚焦时的样式
• html代码
• 通过html代码设置一个普通文本输入框和一个密码框

  <p class="password">
    账号：
    <input placeholder="请输入账号" type="text">
    密码：
    <input placeholder="请输入密码" type="password">
  </p>

• css代码
• 先设置普通文本输入框和密码框未聚焦时的样式

  .password input[type="text"] , .password input[type="password"]{
    
    
    padding: 0px;
    border: 1px solid rgb(155, 153, 153);
  }

• 再设置普通文本输入框和密码框聚焦时的样式

  .password input[type="text"]:focus,.password input[type="password"]:focus,.name:focus{
    
    
    border: 1px solid #6b24ad;
    outline: none;
  }

checked

• 设置单选或多选框被选中的样式
• 设置一个单选框

  <p>
      <input id="radmale" name="gender" type="radio">
      <label for="radmale">男</label>

      <input id="radfemale" name="gender" type="radio">
      <label for="radfemale">女</label>
  </p>

• 为其设置选中时的样式

  input:checked+label {
    
    
      color: red;
  }

伪类元素的常见用法

重置表单元素样式

• 对于表单元素，浏览器有一些默认的样式，所以想要统一的样式，就需重新设置表单样式
• 例如

  input,
  textarea,
  button,
  select {
    
    
      border: none;
  }

  input:focus,
  textarea:focus,
  button:focus,
  select:focus {
    
    
      outline: none;
      outline-offset: 0;
  }

• 改代码重置了表单元素的边框，也重置了表单元素聚焦时的一部分样式

css属性resize

• 设置textarea是否允许调整尺寸
• both：默认值，两个方向都可以调整尺寸
• none：不能调整尺寸
• horizontal: 水平方向可以调整尺寸
• vertical：垂直方向可以调整尺寸

文本框边缘到内容的距离

• 方法一：设置padding

input {
    
    
  padding:0 10px;
}

• 方法二：设置text-indent

input {
    
    
  text-indent: 1em;
}

设置单选框，多选框的样式

• 单选框和多选框样式较难控制
• 需要用一些css代码为其制作样式

  性别：
  <label class="radio-item">
    <input name="gender" type="radio">
    <span class="radio"></span>
    <span>男</span>
  </label>

  <label class="radio-item">
    <input name="gender" type="radio">
    <span class="radio"></span>
    <span>女</span>
  </label>

• css代码
• 设置未选中的样式

.radio-item .radio{
    
    
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border:1px solid rgb(90, 88, 87);
    cursor: pointer;
    display: inline-block;
  }

• 设置选中后的效果
• 在类名为radio的元素后添加一个伪元素after，添加选中后的效果
• 选中后的样式由两部分组成，外面的圈和中间的大圆点

.radio-item input:checked+.radio::after{
    
    
    content: " ";
    display: block;
    height: 7px;
    width: 7px;
    background-color: #93e2e2;
    border-radius: 50%;
    margin-top: 2.3px;
    margin-left: 2.5px;
  }
.radio-item input:checked+.radio{
    
    
    border-color: #93e2e2;
  }

• 将原本元素隐藏

.radio-item input[type="radio"]{
    
    
    display: none;
  }

• 效果图：