前端随心所欲（一）同时满足正则条件，按钮展示。

1.首字母大写： js方法：

function Initial(str){
    let result = '';
    result = str.toLowerCase().replace(/( |^)[a-z]/g,(L)=>L.toUpperCase());
    return result;
 }

2.css方法：

.letter-first{
    text-transform:uppercase;
}

none （默认）| capitalize（单词首字母大写） | uppercase （仅大写字母）| lowercase （无大写字母）| full-width：

2.单选高亮： css方法：

css部分：
 .input:checked + .colors{
    border-color:brown;
    color :brown;
}
html部分：
<div class="single">
    <input class="input" type="radio" name="colors" value="1">
    <div class="colors">天空</div>
</div>

～选择器：查找某个元素后面的所有兄弟元素
+选择器：查找某个元素后面紧邻的兄弟元素
3.input新属性：pattern

css部分：
input[type="text"]:invalid ~ input[type="submit"]{
    display: none;
}
html部分：
<div class="form-css">
    <input type="text" name="tel" placeholder="输入手机号码" pattern="^1[3456789]\d{9}$" required/><br/>
    <input type="text" name="smscode" placeholder="输入验证码" pattern="\d{4}$" required/><br/>
    <input type="submit"/>
</div>

同时满足正则条件，按钮展示。