javascript - 同样的css用在input跟select，textarea样式表现出来不一样，input会发光蓝色的深度也不一样？

问题描述

问 题

   <div  class="center">
           <label>所属区域</label>
           <select >
               <option>朝阳区</option>
               <option>海淀区</option>
           </select>
           <span class="blank"></span>
           <label>门店地址</label>
           <input type="text" name="">
   </div>
    <div  class="center">
           <label>联系人</label>
           <input type="text" name="">
           <span class="blank"></span>
           <label>手机号</label>
           <input type="text" name="">
           
   </div>
    <div  class="center">
           <label>备注</label>
           <textarea rows="8" cols="103"></textarea>
   </div>
    
这是css
textarea{
            
             border: 1px solid #ccc;
            border-radius: 2px;
            color: #000;
            font-family: 'Open Sans', sans-serif;
            font-size: 1em;
            padding: 0 18px;
            transition: background 0.3s ease-in-out;
            
}
input,select{
            border: 1px solid #ccc;
            border-radius: 2px;
            color: #000;
            font-family: 'Open Sans', sans-serif;
            font-size: 1em;
            height: 40px;
            padding: 0 18px;
            transition: background 0.3s ease-in-out;
            width: 300px;
        }

解决方案

看这个input的样式，你这是引用了第三方的css吧？

没有引用的话，outline应该都是一样的。
那样的话，可以：
统一设置一下outline的style试试
outline-color，outline-width等

引用了第三方的话：
把outline设置成none，
然后给:focus统一设置box-shadow的样式试试

这篇关于javascript - 同样的css用在input跟select，textarea样式表现出来不一样，input会发光蓝色的深度也不一样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！