純css實現控制文字框獲得焦點的樣式

admin發表於2017-03-04
CSS

在之前控制文字框失去焦點或獲得焦點的樣式通常是用javascript，因為不用擔心瀏覽器相容性問題。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>  
<style type="text/css">  
.txtcolor{
  color:green;
}
</style> 
<script type="text/javascript"> 
window.onload=function(){
  var txt=document.getElementById("txt");
  txt.onfocus=function(){
    txt.className="txtcolor";
  }
  txt.onblur=function(){
    txt.className="";
  }
}
</script>  
</head>  
<body>  
<input type="text" value="螞蟻部落歡迎您" id="txt"/>
</body>  
</html>

以上程式碼實現了我們的要求，但是使用js還是稍顯麻煩，效能也會受到一定的影響，如果全部使用css的話，那就再好不過了。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>  
<style type="text/css">  
#txt:focus{
  color:green;
}
</style>  
</head>  
<body>  
<input type="text" value="螞蟻部落歡迎您" id="txt"/>
</body>  
</html>

設定文字框活的焦點時候的樣式，失去焦點又會恢復原樣，但是IE6和IE7瀏覽器並不支援。

相關文章