使用 CSS 输入标签 — 教程
2022/8/31 6:24:00
本文主要是介绍使用 CSS 输入标签 — 教程,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
使用 CSS 输入标签 — 教程
HTML
对于 HTML,我们需要一个带有标签和输入的容器。
我们还将为输入设置占位符(“”),这将允许我们使用 CSS 检测输入何时具有某些值。
<div class="input_container"> <input type="text" name="name" placeholder=" "> <label for="name">姓名</label> </div>
CSS
对于 CSS,我们将容器的位置设置为相对并更改字体。
.input_container { 位置:相对; 字体系列:BlinkMacSystemFont; }
现在我们将标签的位置设置为绝对位置并将其与顶部 50% 对齐并转换 translateX(-50%)。
并将 z-index 设置为 -1,以便输入位于标签之上。
否则当鼠标在标签上时我们将无法点击输入。
然后我们将背景颜色设置为白色 (#fff)。实际上,在这里您只需设置与背景相同的颜色,因为该元素将位于输入的顶部边框之上,我们不希望边框在后面。
最后,我将文本颜色设置为浅灰色并添加一些边距和填充。
.input_container 标签 { 位置:绝对; 边距:0 5px; 左:0; 最高:50%; 变换:translateY(-50%); z 指数:-1; 背景颜色:#fff; 填充:0 2px; 颜色:#aaa; }
对于输入,我将边框颜色设置为与标签文本颜色相同的浅灰色。
我还将添加一些边框半径、填充并将背景颜色设置为透明,以便后面的标签可见。
.input_container 输入{ 边框:1px 实心#aaa; 边框半径:5px; 背景颜色:透明; 填充:5px; }
然后我将删除焦点上的轮廓。
.input_container 输入:焦点 { 大纲:无; }
现在,当输入成为焦点或具有某些价值时,我正在为标签设置样式。
使用“input:not(:placeholder-shown)”,当有某个值(未显示占位符时)且处于焦点时,我将选择输入,并通过使用同级“+”选择器,我将选择标签,并通过将 z-index 设置为 1 并将 top 设置为 0 将其移动到输入的顶部边框的顶部。
我会减小字体大小。
/* 焦点或包含值(占位符未显示) */ .input_container input:focus + label, .input_container 输入:not(:placeholder-shown) + label { 顶部:0; 字体大小:8px; z-index:1; }
当输入成为焦点时,我将覆盖标签的颜色和输入的浅灰色边框并将其设置为绿色。
/* 仅当聚焦时 */ .input_container 输入:焦点 + 标签 { 颜色:RGB(15、156、116); } .input_container 输入:焦点 { 边框颜色:rgb(15, 156, 116); }
就是这样。
你可以找到代码和视频教程 这里 .
感谢您的阅读。 ❤️
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明
本文链接:https://www.qanswer.top/1968/53213102
这篇关于使用 CSS 输入标签 — 教程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享