用于输入的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> 

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

编辑：

新增if(this.value)。