在網頁設計中，input框作為使用者輸入資訊的主要方式之一，其樣式的美觀與否直接影響使用者的體驗感。而jQuery作為一個非常流行的JavaScript庫，可以幫助我們輕鬆實現對input樣式的增加和修改。本文將介紹一些常用的jQuery操作，幫助大家快速提升input框的樣式。
一、基礎樣式設定
#可以透過下面的程式碼來設定input框的背景色：
$('input').css('background-color', '#f6f6f6');
同樣，下面程式碼可以設定input框的邊框顏色：
$('input').css('border-color', '#ccc');
$('input').css('color', '#666');
$('input').css('border-radius', '5px');
$('input').css('box-shadow', '0 0 4px #999');
$('input').css('background-image', 'linear-gradient(to bottom, #fff, #f9f9f9)');
$('input').css('width', '200px'); $('input').css('height', '30px');
$('input').hover(function(){ $(this).css('border-color', '#666'); }, function(){ $(this).css('border-color', '#ccc'); });
$('input').css('font-family', 'Arial'); $('input').css('font-size', '14px');
三、實作搜尋框動態效果
最後，我們以搜尋框為例，透過jQuery實作動態效果。當我們在搜尋框中輸入文字時，背景色和字體顏色會改變。
HTML程式碼：
jQuery程式碼：
$('.search-input').on('input', function(){ if($(this).val() != ''){ $(this).css('background-color', '#fff'); $(this).css('color', '#333'); }else{ $(this).css('background-color', '#f6f6f6'); $(this).css('color', '#ccc'); } });
透過監聽輸入框的input事件，當輸入框中有值時，改變輸入框的背景色和字體顏色。
綜上所述，我們可以利用jQuery非常方便地實現對input框樣式的各種修改。透過掌握以上例子和思路，相信大家可以自己動手實現更多個人化的效果，進一步提升網頁設計的品質。
以上是jquery 增加input樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
