input placeholder 作为 label 使用div作为容器包裹input和span, span首先绝对定位到框内,伪装为placeholder, 当input状态为focus提高span的top值,即可伪装成label, 这里有两个问题是: 当用户输入了值的时候,span并不需要恢复为之前的top值, 这里我们使用css或者js 去判断都可以, js就是拿到输入框的值,这里不多做赘...
/* 焦点或包含值(占位符未显示) */.input_containerinput:focus+label,.input_container输入:not(:placeholder-shown) +label{ 顶部:0; 字体大小:8px;z-index:1; } 当输入成为焦点时,我将覆盖标签的颜色和输入的浅灰色边框并将其设置为绿色。 /* 仅当聚焦时 */.input_container输入:焦点 + 标签 { 颜色...
换一种角度:获取没有 placeholder 且没有 focus 的状态,这是将<input>自带的placeholder属性值设为一个空格的原因: /* placeholder 没有显示状态下,且没有focus的 text-input 的相邻兄弟选择器 input-label */.text-input:not(:placeholder-shown).text-input:not(:focus) +.input-label{ } 完整css: .input...
下面是一个具体的示例,我们将使用CSS的focus来改变输入框的边框颜色和背景色。 HTML结构 首先,我们需要创建一个HTML表单,其中包含一个文本输入框。代码如下: <form><labelfor="input">输入框:</label><inputtype="text"id="input"name="input"></form> 1. 2. 3. 4. CSS样式 接下来,我们可以使用CSS来定...
border-box;transition:all 0.3s;font-size:14px;color:#333;}span{position:absolute;font-size:14px;color:#999;left:10px;cursor:text;z-index:1;transition:all 0.3s;}label:hover input,input:focus{border-color:blue;border-radius:8px;}input:focus+span,input:valid+span{transform:translateY(-32...
(1)所有的标签,都可以是选择器。比如ul、li、label、dt、dl、input、div等。 (2)无论这个标签藏的多深,一定能够被选择上。 (3)选择的所有,而不是一个。 2、ID选择器:规定用#来定义(名字自定义) 针对某一个特定的标签来使用,只能使用一次。css中的ID选择器以”#”来定义。
.input__field--haruki:focus + .input__label--haruki::after,.input--filled .input__label--haruki::after {transform: translate3d(0, 0.5em, 0);} 注意我们已经为包裹input的span、input和label添加了一些基本样式。当input聚焦时,label处于inp...
这种label浮动的效果和JVFloatLabeledTextField的效果不同,前者是获取到焦点,label立马开始浮动,而后者是当用户输入内容时(也就是placeholder消失时),label开始浮动。要使两者的效果相同,我们可以使用伪类可以嵌套的特性,修改.input-group>input:focus ~ label为.input-group>input:focus:not(:placeholder-shown) ~ labe...
HTML5+CSS3实现有点小酷的input输入框动画,带动画的输入框,总是让人忍不住去点它。 先看效果: 源代码: <divclass="wrapper"><divclass="input-data"><inputtype="text"required><divclass="underline"></div><label>您的姓名</label></div></div> ...
将label元素放置在起始位置,并在div中垂直居中,然后隐藏它。 通过:not, :focus和:placeholder-shown伪类的组合决定什么时候显示label标签:如果placeholder text消失了,则显示label — input:not(:placeholder-shown) + label;如果输入框获取到了焦点,并且没有显示placeholder text,则显示label — input:focus:not(:plac...