jqueryは入力スタイルを追加します

Web デザインにおいて、入力ボックスはユーザーが情報を入力する主な方法の 1 つであり、そのスタイルの美しさはユーザー エクスペリエンスに直接影響します。非常に人気のある JavaScript ライブラリである jQuery は、入力スタイルを簡単に追加および変更するのに役立ちます。この記事では、入力ボックスのスタイルを迅速に改善するのに役立つ一般的な jQuery 操作をいくつか紹介します。

1. 基本的なスタイル設定

1. 背景色の変更

次のコードを通じて入力ボックスの背景色を設定できます:

$('input').css('background-color', '#f6f6f6');

2. 境界線の色を変更する

同様に、次のコードは入力ボックスの境界線の色を設定できます:

$('input').css('border-color', '#ccc');

3. テキストの色を変更する

#コードは次のとおりです。入力ボックスに入力された文字の色を変更できます。 ##

$('input').css('color', '#666');

#境界線の円弧を設定します

コードは次のとおりです、入力ボックスの境界線の円弧を大きくすることができます :

$('input').css('border-radius', '5px');

2. 高度なスタイル設定

基本的なスタイルに加えて、さらに多くのことも実現できますいくつかの特別なスタイル設定によるパーソナライズされた効果。

#影効果

1. 次のコードは、入力ボックスに影効果を追加できます:

$('input').css('box-shadow', '0 0 4px #999');

グラデーション塗りつぶし

2. コードは次のとおりです。入力ボックスにグラデーション塗りつぶし効果を追加できます:

$('input').css('background-image', 'linear-gradient(to bottom, #fff, #f9f9f9)');

幅と高さを設定します

3. コードは次のとおりです。以下のように、入力ボックスの幅と高さを設定できます。

$('input').css('width', '200px');
$('input').css('height', '30px');

フローティング効果

4. コードは次のとおりです。入力にフローティング効果を追加できます。ボックス:

$('input').hover(function(){
    $(this).css('border-color', '#666');
}, function(){
    $(this).css('border-color', '#ccc');
});

テキストのフォントとサイズを変更する

5. コードは次のとおりです。入力ボックスに入力されたテキストのフォント タイプとサイズを変更できます。

$('input').css('font-family', 'Arial');
$('input').css('font-size', '14px');

3. 検索ボックスの動的な効果を実現する

最後に、jQuery を使用して動的な効果を実現する検索ボックスを例に挙げます。検索ボックスに文字を入力すると、背景色と文字色が変わります。

HTML コード:

<div class="search-box">
    <input type="text" class="search-input" placeholder="请输入搜索内容">
</div>

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');
    }
});

入力ボックスの入力イベントをリッスンすることで、入力ボックスに値がある場合に背景を変更します入力ボックスの色の色とフォント。

要約すると、jQuery を使用すると、入力ボックスのスタイルにさまざまな変更を簡単に実装できます。上記の事例やアイデアをマスターすることで、よりパーソナライズされた効果を自分で実現し、Webデザインの品質をさらに向上させることができると思います。

以上がjqueryは入力スタイルを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。