jquery adds input style

In web design, the input box is one of the main ways for users to input information. The beauty of its style directly affects the user's experience. As a very popular JavaScript library, jQuery can help us easily add and modify input styles. This article will introduce some common jQuery operations to help you quickly improve the style of the input box.

1. Basic style settings

1. Modify the background color

You can set the background color of the input box through the following code:

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

2. Modify the border color

Similarly, the following code can set the border color of the input box:

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

3. Modify the text color

The code is as follows, you can change the color of the characters entered in the input box:

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

4. Set the arc of the border

The code is as follows, you can increase the arc of the input box border ：

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

2. Advanced style settings

In addition to basic styles, we can also achieve more personalized effects through some special style settings.

1. Shadow effect

The following code can add a shadow effect to the input box:

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

2. Gradient fill

The code is as follows, you can add a gradient fill effect to the input box:

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

3. Set the width and height

The code is as follows, you can set the width and height of the input box:

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

4. Floating effect

The code is as follows, you can add a floating effect to the input box:

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

5. Modify the text font and size

The code is as follows, you can modify the font type and size of the text entered in the input box:

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

3. Realize the dynamic effect of the search box

Finally, we take the search box as an example, through jQuery achieves dynamic effects. When we enter text in the search box, the background color and font color will change.

HTML code:

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

jQuery code:

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

By listening to the input event of the input box, when there is a value in the input box, change the background color and font of the input box color.

To sum up, we can use jQuery to easily implement various modifications to the input box style. By mastering the above examples and ideas, I believe you can achieve more personalized effects by yourself and further improve the quality of web design.

The above is the detailed content of jquery adds input style. For more information, please follow other related articles on the PHP Chinese website!