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

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


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

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

PC端没问题，但是手机端测试无效。

 

参考链接：http://blog.csdn.net/u010730897/article/details/72721960

这里我用div模拟一个：

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>

 PC端没问题，但是手机端依然测试无效。

 

 

 

还可与使用一个方法：

给div或者p加

contenteditable="true" 属性 然后获取他的值就好了

但是原理跟input的基本一样