input框取消光标颜色手机端不生效

<style>
input{
color:transparent;
}
</style>
<input  value="我要隐藏光标">


//文字颜色可以使用text-shadow属性

<style>
input{
color:transparent;
text-shadow:0 0 0 red;
}
</style>

div.box{
            position: relative;
        }
        input.class3 {
            width:100px;
            height:50px;
            font-size: 50px;
            position:absolute;
            top:0;
            left:0;
            border:none;
            outline:none;
            color:transparent;
            opacity: 0;
        }
        #bbb{
            width:100px;
            height:50px;
            border:2px solid #e74c3c;
            position:absolute;
            top:0;
            left:0;
        }

<div class="box">
    <div  id="bbb"></div>
    <input type="text" name="aaa" id="aaa" class="class3" oninput="myFun(this)">
</div>

<script>
    function myFun(e){
        document.getElementById("bbb").innerHTML=e.value;
        console.log(document.getElementById("bbb").innerHTML);
    }
</script>