圖片.png
當鼠標聚焦時輸入框變色
css相關,鼠標點擊<input>輸入域后出現有顏色的邊框
原理：css偽類之input輸入框鼠標點擊邊框變色效果
偽類元素的使用：:focus
一：當輸入框獲得焦點時，改變它的背景色
效果圖：當鼠標聚焦時輸入內部填充色改變
圖片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠標點擊<input>輸入域后出現有顏色的邊框</title>
<style type="text/css">
* {margin: 0; padding: 0;}
.main {margin: 50px auto; width: 400px;}
.inp {
width: 200px;
height: 30px;
}
.inp:focus {
outline:none;
border: 1px solid #CCCCCC;
background:#f0ecec;
}
</style>
</head>
<body>
<div class="main">
<input type="text" class="inp">
<div class="yanzhen">111</div>
</div>
</body>
</html>
==========================
二：效果圖：當鼠標聚焦時外部border變色，css實現的方法：
實現點擊的時候出現藍色光暈
圖片.png
代碼：
.inp:focus {
border-style:solid;
border-color: #03a9f4;
box-shadow: 0 0 15px #03a9f4;
}
js實現的方法：
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>輸入框點擊時邊框變色效果</title>
</head>
<body>
<style type="text/css">
.focusInput {border:1px solid #99CC33;}
</style>
<script type="text/javascript">
function focusInput(focusClass) {
var elements = document.getElementsByTagName("input");
for (var i=0; i < elements.length; i++) {
if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
elements[i].onfocus = function() { this.className = focusClass; };
elements[i].onblur = function() { this.className = ''; };
}
}
}
window.onload = function () {
focusInput('focusInput');
}
</script>
請輸入姓名：<input type="text" />
</body>
</html>
================================
三：js控制input內部填充背景和border邊框同時變色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.look {background:#e6e6e6;border:1px solid #e6e6e6;}
</style>
</head>
<script language="javascript" type="text/javascript">
function doClickStyle(obj,objclassname){
document.getElementById(obj).className=objclassname;
}
</script>
<body>
<input type="text" id="text10" tabindex="17" " onfocus="doClickStyle('text10','look')" onblur="doClickStyle('text10','nolook')" value="" />
</body>
</html>
四：css點擊一個input輸入框怎么使其后面的button也變色
以摩拜單車為例昼榛，參考鏈接：http://www.w3school.com.cn/jquery/event_focus.asp
本專題記錄平時項目中一些最基礎簡單的實現代碼和容易忽略的細節(jié)店溢，僅僅是為了記錄优幸，對于自己來說征字，基礎是最重要的寻咒，一個項目就是由無數的基礎組成
原文作者：祈澈姑娘
技術博客：http://www.reibang.com/u/05f416aefbe190后前端妹子兄朋，愛編程，愛運營撼玄，愛折騰夺姑。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見掌猛，歡迎大家一起探討交流盏浙。
