自製 跟 Bootstrap 一樣的 輸入框

Custmos the same style with Bootstrap input and textarea

90
如果你喜歡bootstrap裡面的input,textarea那種滑鼠點進去還會有淡淡的藍色外框
這邊告訴你怎麼做
Bootstrap官網範例

首先在css的地方要先設置

input,textarea
{
border:1px solid;
border-color:rgb(200,200,200);
border-radius:5px;
color:rgb(85,85,85);
letter-spacing:1px;
outline: none;
padding:3px;
}
input
{
line-height:23px;
height:25px;
}
textarea
{
resize: none; /*選擇性要不要用*/
}

接著你需要以下兩個js檔案,放在<head>的tag裡面

  1. jquery.js 連結

  2. jquery.animate-shadow.js 連結


然後寫一段script,可以放在</body>這個tag之前

<script>
$(document).ready(function(){
$("input, textarea").stop().focus(function(){
$(this).stop().animate({
borderTopColor:"rgb(116,185,239)",
borderLeftColor:"rgb(116,185,239)",
borderRightColor:"rgb(116,185,239)",
borderBottomColor:"rgb(116,185,239)",
boxShadow:"0 0 4px rgba(116,185,239,0.5)"
},"fast");
});
$("input, textarea").blur(function(){
$(this).stop().animate({
borderTopColor:"rgb(210,210,210)",
borderLeftColor:"rgb(210,210,210)",
borderRightColor:"rgb(210,210,210)",
borderBottomColor:"rgb(210,210,210)",
boxShadow:"none"
},"fast");
});
});
</script>

將將!完成了跟bootstrap一樣的美妙輸入框摟
喜歡我們的文章嗎
給一個讚吧~^^
本站聲明
目前偵測到您現在處於未登入的狀況中 若在此狀態進行收藏很有可能導致資料遺失或錯誤 建議先行登入後重新執行步驟,不僅能保障收藏資料也能獲得最新的資訊唷! kikinote小精靈關心您!
不再顯示此視窗