一、:focus 伪类选择器，表示元素聚焦时的样式

用鼠标点击文本框的时候，文本框外面多了一个蓝色的边框，这是浏览器默认给加的聚焦样式

<a href="">lorem</a>

<input type="text">

<button>提交</button>

检查元素

1. 选中左边，文本框的 input 代码

2. 右边点击 :hov （打开 Force element state）

3. 按照视频里袁老师的方法，选择的是 :focus 后，没有出现浏览器默认的样式，应该是现在的浏览器升级了

现在选择 :focus-visible 是浏览器设置的现默认样式了 

分析一下，

浏览器默认的聚焦样式有哪些设置

:focus-visible { 

  outline: -webkit-focus-ring-color auto 1px;

} 

1. :focus-visible 前面没有加元素选择器，表示给页面上所有元素都设置了这个聚焦样式

2. outline 表示外边框

3. -webkit-focus-ring-color 是谷歌浏览器特有的颜色

4. auto 表示边框的样式，我们常常设置solid，auto表示自动的，浏览器会根据实际情况设置（边框的四个角会有些弧度）

5. 1px 边框的宽度，设置 auto 的时候边框宽度是无效的

看其他元素聚焦，

按键盘的Tab键（来回切换），聚焦样式是所有元素都有的

tabindex 属性可以控制Tab键的切换顺序，按照 tabindex 属性的数字顺序去切换

<a tabindex="2" href="">lorem</a>

<input tabindex="1" type="text">

<button tabindex="3">提交</button>

浏览器表单元素，默认聚焦的边框样式需要覆盖掉，有那些样式需要覆盖呢？

1. 聚焦的样式可以通过伪类选择器  :focus  来设置

2. 把外边框  outline: none  去掉，input元素聚焦后就没有外边框了

<style>
  input:focus{ 
    outline: none;
  }
</style>

<input type="text">

<textarea name="" cols="30" rows="6"></textarea>

为什么要覆盖浏览器的默认边框样式呢？

1. 不同的浏览器，input 元素默认边框样式不一样

2. 为了在每一个浏览器里面统一，需要覆盖掉浏览器的默认样式

怎么覆盖掉呢？

设置为  outline: none 

或设置为其它值  outline: 1px solid #ff8c8c;  

input:focus{
  outline: 1px solid #ff8c8c;
}

效果不太理想，因为浏览器的默认样式还给加了  outline-offset: 0px; 

input:focus-visible {

  outline-offset: 0px;

}

如果默认边框样式不是 solid 是 auto，这个  outline-offset: 0px  没有效果，不是 auto它就有效了， outline-offset: 0px;  表示外边框的偏移量

我们自己设置  outline-offset:0 px; 

<style>

input:focus{
  outline: 1px solid #ff8c8c;
  outline-offset: 1px; /* 取值从-3~0~6测试一下，就看出来了 */
}

</style>

<input type="text">

outline-offset: 0px; 设置为0效果也不理想，还有默认的边

input{
  outline:none;
  color:#ccc;
}

input:focus{
  outline:1px solid #ff8c8c;
  outline-offset:0;
  color:red;
}

这样定义

input{
  outline: none;
  border: 1px solid #ccc;
}

input:focus{
  border: 1px solid #ff8c8c;
}

二、:checked 伪类选择器，表示单选框或多选框被选中时的样式（特指单选或多选框被选中时的样式）

 :checked  表示被选中，只有单选多选有这个伪类，其他元素就不要用了（就像a元素有自己特有的伪类，爱恨法则）

<style>
  input:checked{
    background: red;
  }
</style>

<p>
  <input type="radio" name="gender" value="female" checked> 女
  <input type="radio" name="gender" value="male"> 男
</p>

单选框背景设置成红色是生效的，但是没有显示效果，

因为单选框和多选框是可替换元素，可替换元素里面有些样式是我们控制不了的

单选框和多选框，几乎没什么样式让我们控制，不能控制样式，这个 :checked 有什么用呢？

看例子，gender 被选中后，设置下一个 label 元素，加号选择选中的是下一个兄弟元素，可以达到意想不到的效果 

<style>
  input:checked + label{
    color:red;
  }
</style>

<input type="radio" name="gender" value="female" checked id="radfemale">
<label for="radfemale">女</label>

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

总结，新学的两个伪类

:focus

:checked

三、重置表单元素样式的常见方法

常见用法不仅是 :focus、:checked 这两个伪类，还有其它东西

表单元素的样式是浏览器给的，但是每浏览器又不一样，不重置在不同的浏览器看到的效果就不一样，

还有浏览器默认的样式，跟设计稿不一样，基于这些情况都需要对表单样式进行重置

1. 重置文本框 和 textarea

怎么重置呢？

1 .去掉默认边框

2. 去掉聚焦时候的默认样式

3. 写自己的样式

<style>
  
  /* 去掉默认样式 */

  /* 去掉边框 */
  input,textarea,button,select{
    border: none;
  }

  /* 去掉聚焦时候的默认样式 */
  input:focus, textarea:focus, button:focus, select:focus{
    outline: none;
    outline-offset: 0;
  }

  /* 写自己的样式 */

  /* 单行文本框设置灰色边框 */
  input[type="text"], textarea, select{
    border:1px solid #ccc;
  }

  /* 添加聚焦时候的样式 */
  input[type="text"]:focus, textarea:focus{
    border:1px solid #ff8c8c;
  }

  /* 设置按钮 */
  button{
    border: 1px solid #008c8c;
    border-radius: 2px;
  }

</style>

<p>
  <input type="text">
</p>

<p>
  <select name="" id="">
    <option value="">重庆</option>
    <option value="">北京</option>
    <option value="">哈尔滨</option>
  </select>
</p>

<p>
  <textarea name="" id="" cols="30" rows="10"></textarea>
</p>

<p>
  <button>按钮</button>
</p>

2. 设置多行文本框（textarea）是否允许调整尺寸

css控制多行文本框是否允许调整尺寸，怎么来控制呢？resize属性控制调整尺寸

textarea{
  resize: vertical;
}

resize属性有这样一些取值

 resize: both;   默认值，两个方向上都可以调整尺寸

 resize: none;   两个方向上都不可以调整尺寸

 reseze: horizontal;  只有在水平方向上调整尺寸

 resize: vertical;   只在垂直方向上调整尺寸

3. 文本框边缘到内容的距离，

方式一

使用 padding

<style>
  input{
    padding:0 10px;
  }
</style>

<input type="text" value="文本框边缘 到 内容的距离">

方式二

使用 text-indent 表示首行缩进

<style>

  input, textarea{
    text-indent:1em;
  }

</style>

<input type="text" value="文本框边缘 到 内容的距离">

<textarea name="" id="" cols="30" rows="10"></textarea>

3. 控制单选框和多选框的样式

用div元素自己做 单元框 和 多选框

<style>
  .radio{
    width: 12px;
    height: 12px;
    border:1px solid #999;
    border-radius: 50%;
    cursor:pointer; 
    margin:20px;
  }

  /* 选中时的样式 */
  .radio.checked{
    border-color: #ff8c8c;
  }

  /* 用伪元素在里面加一个圈 */
  .radio.checked::after{
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: #ff8c8c;
    border-radius: 50%;
    margin-top: 3px;
    margin-left: 3px;
  }
</style>

<div class="radio"></div>
<div class="radio checked"></div>

4. 实现单选框的切换效果

为什么不用div，因为在label里面不允许加div，可以加span

label可以关联一个单选框或多选框

<style>

  /* 1.找到span元素 */
  .radio-item .radio{
    width: 12px;
    height: 12px;
    border:1px solid #ccc;
    border-radius: 50%;
    cursor:pointer;
    display: inline-block;/* span默认是行盒不能设置宽高，这里设置成行块盒  */
  }

  /*
  2.选中的效果
   + 加号选择器，选中的是下一个兄弟元素
   1).span没有选中的效果，radio才有选中的效果
   2).找到选中的input单选框 .radio-item input:checked
   3).找到了之后，再找"选中单选框"的下一个兄弟元素
     类名为.radio的元素
   4).使用伪元素选择器，设置span的样式，加一个after子元素
  */
  .radio-item input:checked + .radio{
    border:1px solid #ff8c8c;
  }
  .radio-item input:checked + .radio::after{
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background: #ff8c8c;
    border-radius: 50%;
    margin-top: 2px;
    margin-left: 2px;
  }


  /* 
  3.改文字颜色
   ~ 选中的是后面所有的兄弟元素
   1).找到选中的单选框，后面第二个span元素
   2).单选框后面两个都被选中了，第一个span设置文字颜色也没有什么意义
  */
  .radio-item input:checked ~ span{
    color: #ff8c8c;
  }
  /* 
  4.最后精确隐藏input单选框 
  */
  .radio-item input[type="radio"]{
    display: none;
  }

</style>

<p>
  请选择性别：
  <label class="radio-item">
    <input type="radio" name="gender" value="female" checked>
    <span class="radio"></span>
    <span>女</span>
  </label>
  <label class="radio-item">
    <input type="radio" name="gender" value="female">
    <span class="radio"></span>
    <span>男</span>
  </label>
</p>

FirstTime 20220129

四、表单练习

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="reg.css">
<title>注册页面</title>
</head>
<body>

  <div class="form">

    <h1>
      <span>注册</span>
    </h1>

    <div class="form-area">

      <!-- 登录名 -->
      <div class="form-item hasError">
        <input type="text" placeholder="账号">
        <div class="error">
          该昵称已被他人使用
        </div>
      </div>

      <!-- 密码 -->
      <div class="form-item">
        <input type="password" placeholder="密码（6-16个字符组成，区分大小写）">
      </div>

      <!-- 选择框由两个部分组成 -->
      <div class="form-item">

        <!-- 里面分两部分 -->
        <div class="select clearfix">

          <!-- 第一部分左浮动 -->
          <div class="select-item">
            <div class="title">中国大陆</div>
            <ul>
              <li class="active">中国大陆</li>
              <li>中国香港特别行政区</li>
              <li>中国澳门特别行政区</li>
              <li>中国台湾</li>
              <li>美国</li>
              <li>比利时</li>
              <li>澳大利亚</li>
              <li>法国</li>
            </ul>
          </div>

          <!-- 第二部分也是左浮动 -->
          <div class="input">
            <input type="text" placeholder="填写常用的手机号">
          </div>

        </div>
      </div>

      <!-- 里面由两部分组成 -->
      <div class="form-item">
        <input type="text" value="请输入短信验证码">
        <button type="button" class="btn-sncode">点击获取</button>
      </div>

      <!-- 注册协议说明文字 -->
      <div class="readme">
        <label>
          <input type="checkbox">
          <span class="checkbox"></span>
          <span>
            我已同意
            <a href="javascript:;">《哔哩哔哩弹幕网用户使用协议》</a>
            和
            <a href="javascript:;">《哔哩哔哩弹幕网账号中心规范》</a>
          </span>
        </label>
      </div>

      <!-- 按钮 -->
      <div class="form-item">
        <button class="fill" disabled>注册</button>
      </div>

      <!-- 已有账号直接登录 -->
      <div class="readme txtright">
        <a href="javascript:;">已有账号，直接登录 &gt;</a>
      </div>

    </div>

  </div>

</body>
</html>

reg.css

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

/* 统一设置表单里a元素的颜色，网站上a元素的颜色，往往上统一的 */
.form a{
  color:#00A1D6;
}

.form{
  width: 980px;
  margin: 1em auto;
}
.form h1{
  font-size: 38px;
  border-bottom: 1px solid #ddd;
  height: 20px;
  position: relative;
  margin-bottom: 34px;
}
.form h1 span{
  position: absolute;
  width: 120px;
  height: 38px;
  left: 50%;
  top: -5px;
  margin-left: -60px;
  text-align: center;
  background-color: #fff;
}

/* 表单区域 */
.form-area{
  width: 423px;
  margin: 0 auto;
}

.form-area .form-item{
  margin: 50px 0;
  /* 每个 form-tiem 都是相对定位*/
  position: relative;
}

/* select区域，左右两部分 */
.form-area .select .select-item,
.form-area .select .input{
  float: left;
  height: 40px;
}
.form-area .select .select-item{
  width: 140px;
  border:1px solid #DCDFE6;
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
  /* 
  圆角边框是一个速写属性
  border-radius 分成
  border-top-left-radius       上左的圆弧半径
  border-top-right-radius      上右的圆弧半径
  border-bottom-right-radius   下右的圆弧半径
  border-bottom-left-radius    下左的圆弧半径

  单独设置
  border-bottom-right-radius:0; 
  border-top-right-radius:0;

  也可以这样，按照次序依次书写
  border-radius:左上 右上 右下 左下;
  */
  border-radius: 4px 0 0 4px;
  border-right: none;
}
.form-area .select .input{
  width: 283px;
}
.form-area .select .input input{
  /* 这里再一次单独的设置，把之前的覆盖掉 */
    border-radius: 0 4px 4px 0;
}

.form-area .select .select-item .title{
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  color: #909399;
  cursor:pointer;
}

.form-area .select .select-item ul{
  background-color: #fff;
  /*
  最大高度
  意思上如果内容不满256，按照内容为准，
  如果内容超过了256，那么最多久256
  */
  max-height: 256px;
  overflow-y: auto;
  
  position: absolute;
  top:50px;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  border:1px solid #DCDFE6;
  border-radius: 4px;
  color: #606266;
  padding: 10px 0;
  font-size: 14px;
  
  display: none;
}
.form-area .select .select-item ul li{
  height: 34px;
  line-height: 34px;
  padding: 0 20px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-area .select .select-item ul li.active{
  color:#00A1D6;
  font-weight: 700;;
}
.form-area .select .select-item ul li:hover{
  background-color: #f5f7fa;
}

.form-area .form-item .btn-sncode{
  width: 130px;
  height: 36px;
  position: absolute;
  right: 2px;
  top: 2px;
}

.form-area .readme{
  /* margin-top: -40px; */
  /* 上下都需要缩进距离，直接设置上下负数，左右为0 */
  margin: -40px 0;
  
  font-size: 12px;
}

/* 多选框的效果 */
.form-area .readme .checkbox{
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  box-sizing: border-box;
}
/* 选中多选框后的效果 */
.form-area .readme input:checked+.checkbox{
  border-color: #00A1D6;
  border-radius: 0;
}
.form-area .readme input:checked+.checkbox::after{
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  margin: 1px;
  /* border-radius: 4px; */
  background: #00A1D6;
}

.form-area .form-item .error{
  position: absolute;
  width: 240px;
  height: 40px;
  line-height: 40px;
  right: -255px;
  top:0;
  color: #f45d90;
  font-size: 12px;
  display: none;
}

/*
如果有错误，
1.就找到.form-item.hasError
2.下面的.form-item.hasError .error
3.显示出来display: block;
*/
.form-area .form-item.hasError .error{
  display: block;
}
.form-area .form-item.hasError input{
  border-color: #f45d90;
}

.form-area .readme input{
  display: none;
}

/* 统一文本框样式 */
input[type="text"], input[type="password"]{
  border: 1px solid #dcdfe6;
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  height: 40px;
  text-indent: 1em;
  font-size: 14px;
  color: #606266;
  font-family: "PingFangSC-Medium;"
}

/* 边框hover效果 */
input[type="text"]:hover, input[type="password"]:hover{
  border-color:#c0c4cc;
}

/* placeholder字体颜色 */
input[type="text"]::placeholder, input[type="password"]::placeholder{
  color:#c0c4cc;
}

/* input聚焦时候颜色 */
input[type="text"]:focus, input[type="password"]:focus{
  border-color:#00a1d6;
}

/* 统一设置按钮（button）样式 */
button{
  height: 40px;
  background-color: #00a1d6;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
}
button:hover{
  background-color: #33b4de;
}

button.fill{
  width: 100%;
}

.txtright{
  text-align: right;
}

/* 
:disbled 也上一个伪类

button:disabled 意思上按钮禁用状态下他的样式
*/
button:disabled{
  background-color: #f5f5f5;
  color:rgba(0,0,0, .25);
  border: 1px solid #d9d9d9;

  /* not-allowed 表示不允许 */
  cursor:not-allowed;
}

reset.css

/* 
  http://meyerweb.com/eric/tools/css/reset/ 
  v2.0 | 20110126
  License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%; /* 可以理解为1em */
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1; /* 行高是1 */
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 自己添加的a元素初始化 */
a{
  text-decoration: none;
  color: inherit;
}

/* 淘宝的字体设置 */
body{
  font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","HeitiSC","WenQuanYi Micro Hei",sans-serif;
}

/* 重置表单元素 */
input, textarea, button, select{
  border: none;
}
input:focus,
textarea:focus,
button:focus,
select:focus{
  outline:none;
  outline-offset:0;
}

firstTime 20220130