用於輸入的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)。