输入 :focus WITH text 的 CSS 伪选择器

Question

如何在用户输入文本并点击退出后保持 :focus 的样式？

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>

fiddle :http://jsfiddle.net/99dgvebv/1/

编辑:

添加了if(this.value)。