在web开发中,有时我们需要通过下划线来给文字或者链接添加装饰效果。下面是一种使用CSS实现下划线在输入框上方跟随输入文字的实现方式。 <form action= # >
在web开发中,有时我们需要通过下划线来给文字或者链接添加装饰效果。下面是一种使用CSS实现下划线在输入框上方跟随输入文字的实现方式。
<form action="#">
<label>输入框:<input id="underline-input" type="text"></label>
<p id="underline-preview"></p>
</form>
<style>
#underline-input {
border: none;
border-bottom: 1px solid #333;
outline: none;
}
#underline-preview {
border-bottom: 1px solid #333;
width: fit-content;
margin-top: -18px;
}
</style>
<script>
const input = document.getElementById("underline-input");
const preview = document.getElementById("underline-preview");
input.addEventListener("input", () => {
preview.innerHTML = input.value;
});
</script>
首先我们创建了一个带有输入框和预览框的表单,并给输入框一个下划线。然后我们使用CSS对预览框设置了宽度和下划线,并将其位置设置为输入框上方-18像素。接下来我们使用JavaScript监听input事件,更新预览框的内容。
通过这种方式,我们可以动态实现下划线跟随输入文字的效果,增加页面的交互性和美观度。
粉丝
0
关注
0
收藏
0