自製 跟 Bootstrap 一樣的 輸入框

Custmos the same style with Bootstrap input and textarea

作者: 七味粉 |
文章2013-04-15
116 分享
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一樣的美妙輸入框摟
貼心小提醒
1.您目前未登入,若於此狀態進行文章收藏,紀錄可能無法長期保留。
2.建議登入後進行收藏,好文會幫你保存著,隨時要看也不怕找不到唷~

KiKiNote持續為您提供最優質的資訊內容,謝謝您!
不再顯示此視窗

複製成功