:before 伪类妙用 + 打造一个假的输入框

记一次以前从未注意的:before伪类之content属性 和用div模仿输入框

案列–ofo的车牌输入框

整个布局大体分为 上 中 下
观察输入框

1. 1 输入内容为黑色
2. 2 闪烁的光标为黄色
   就奇怪在 输入框的光标能单独设置颜色？ 设置input的color属性？ 不不 这样虽然改变了光标颜色 可是也改变输入字体的颜色
   改变思路
   使用ofo输入车牌号的时候 并没有唤起手机的键盘 禁止弹出软键盘？好吧太疑惑。这里使用
   div 和 :before :after 伪元素实现

3. 1 div画一个框

   .text{
               width:65%;
               height: 60px;
               border: 2px solid #ffd500;
               text-align: center;
               color:black;
               line-height: 60px;
               position: relative;
           }

4. 2 :before 承载输入的内容

.text::before{
            content: '';
        }

1. 3 :after 作为光标

   .text::after{
               content: '';
               border-right: 2px solid #ffd500;
               height: 50%;
               opacity: 1;
               animation: focus .7s forwards infinite;
       
           }
   /*闪烁动作*/
           @keyframes focus{
               from{
                   opacity: 1;
               }to{
                   opacity: 0;
               }
           }
   

2. 解决这个 假的输入框 的输入问题
   因为内容放在 .text::before里面 所以需要改变content的内容
   js能选中伪类？不能
   dom操作 创建一个style 设置新的css

   new=document.createElement('style');
   new.innerText='p:after{content:\'新的content\'}';
   document.body.appendChild(new);

---

不不不 这样太不优雅了 重新考虑 .text::before的设置
这里需要注意: 以前使用:before 经常忽视content 设为 content:'' 这里设为 content: attr(data-content);
即 获取自定义的data 属性 <div type="text" class="text" id="text" data-content=""></div>
这样js设置起来 就优雅很多了

//1
dataset.content='123456';
//2
setAttribute('data-content','789456');

完整源代码