Home > Article > Web Front-end > How to create a dynamic input box effect using HTML, CSS and jQuery
How to create a dynamic input box effect using HTML, CSS and jQuery
- PHPzOriginal
- 2023-10-28 09:18:20730browse
How to use HTML, CSS and jQuery to create a dynamic input box effect
In modern web design, dynamic effects can increase the interactivity and experience of users with the website feel. Among them, the dynamic input box effect is a very common interaction design. This article will introduce how to use HTML, CSS and jQuery to create a dynamic input box effect, and provide specific code examples.
First, we need to create a basic HTML structure to achieve the input box effect. In HTML, we can use the <div> element to represent the style of the input box and set its appearance through CSS. The code is as follows: <pre class='brush:html;toolbar:false;'><div class="input-box">
<input type="text">
<span class="underline"></span>
</div></pre><p>Next, we need to use CSS to style the input box. You can set the width, height, border style, background color and other attributes of the input box. At the same time, we can also set the underline style in the input box. The specific CSS code is as follows: </p><pre class='brush:css;toolbar:false;'>.input-box {
position: relative;
width: 200px;
height: 30px;
border-bottom: 1px solid #ccc;
}
.input-box input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: transparent;
}
.input-box .underline {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #ccc;
transform-origin: center;
transform: scaleX(0);
transition: transform 0.3s ease;
}</pre><p>In the above code, we use <code>position: absolute to set the position of the input box and underline, and use width: 100% and height: 100% to make the input box and underline fill the entire parent element.
Next, we need to use jQuery to achieve dynamic effects. When the user enters content, we can listen to the input event of the input box, and then change the width of the underline based on the input content. The specific jQuery code is as follows:
$('.input-box input').on('input', function() {
var inputWidth = $(this).val().length * 10;
$('.input-box .underline').css('transform', 'scaleX(' + inputWidth + ')');
});In the above code, we first listen to the input event of the input box, and then use val().length to get the input The length of the content and multiplied by a factor, here 10, to calculate the width of the underline. Finally, use the css method to set the width of the underline.
At this point, we have completed the creation of the dynamic input box effect. When the user enters content, the underline will dynamically change according to the length of the input content.
To sum up, by using HTML, CSS and jQuery, we can easily create a dynamic input box effect. This dynamic effect can enhance the user experience and increase the interactivity of the web page. Hope this article is helpful to you.
The above is the detailed content of How to create a dynamic input box effect using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!