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

ログイン後にコピー

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

$('.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は入力スタイルを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。