用于输入的CSS伪选择器：焦点与文本

Question

如何保持样式：用户输入文字并点击后关注？

input[type="text"]{
    background-color:transparent;
}
input[type="text"]:focus{
    background-color:white;
    box-shadow:  3px 3px #red;
}

Answer 1

您需要使用Javascript。我在下面做的是在单击输入时添加一个类：

<style>
input[type="text"]{
    background-color:transparent;
}
input[type="text"]:focus,input[type="text"].focus{
    background-color:white;
    box-shadow:  3px 3px #red;
}
</style>

<input type=text id=myinput>

<script>
// can't use the 'click' event because it'll wait for the user to release the mouse
document.getElementById('myinput').addEventListener('mousedown',function() {
    if(this.value)
        this.className='focus';
},false);
</script>

小提琴：http://jsfiddle.net/99dgvebv/1/

修改

添加了if(this.value)。