带 CSS 的浮动标签
Floating label with CSS
我有一个使用 formIo 生成的表单,需要向该表单添加一些样式。
我想让标签在我专注于输入时浮动,只有 CSS
这是生成的 html 和我用来实现此目标的 css:
.ff-container {
display: flex;
flex-flow: column-reverse;
margin-bottom: 1em;
}
.ff-label,
.ff-input {
transition: all 0.2s;
touch-action: manipulation;
}
.ff-input {
font-size: 1.5em;
border: 0;
border-bottom: 1px solid #ccc;
font-family: inherit;
-webkit-appearance: none;
border-radius: 0;
padding: 0;
cursor: text;
}
.ff-input:focus {
outline: 0;
border-bottom: 1px solid #666;
}
.ff-label {
text-transform: uppercase;
letter-spacing: 0.1em;
}
/*i need to add here :placeholder-shown to the input but i dont know how i do it*/
.ff-container:focus-within > div+label {
cursor: text;
max-width: 66.66%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transform-origin: left bottom;
transform: translate(0, 2.125rem) scale(1.5);
}
<div class="ff-container">
<div class="ff-sub-container">
<input type="text" class="ff-input" placeholder="Your name here ..">
</div>
<label class="ff-label">Name</label>
</div>
PS:如果您需要更多信息,请告诉我
试一试。当您聚焦输入时,标签会出现在输入旁边。
除此之外,您的问题缺乏总体方向并且没有提供所需的视觉效果,因此您需要调整其余代码以满足您的需要。
.hidden {
display: none;
}
.form-group {
position: relative;
padding: 20px 0 0 0;
}
.form-control {
width: 50%;
}
.form-control:focus + label {
position: absolute;
top: 0;
left: 0;
background-color: red;
color: white;
width: 50px;
display: inline-flex;
}
<div ref="element" class="form-group">
<input class="form-control" type="text" ref="input">
<label class="col-form-label hidden">Test</label>
</div>
我有一个使用 formIo 生成的表单,需要向该表单添加一些样式。
我想让标签在我专注于输入时浮动,只有 CSS
这是生成的 html 和我用来实现此目标的 css:
.ff-container {
display: flex;
flex-flow: column-reverse;
margin-bottom: 1em;
}
.ff-label,
.ff-input {
transition: all 0.2s;
touch-action: manipulation;
}
.ff-input {
font-size: 1.5em;
border: 0;
border-bottom: 1px solid #ccc;
font-family: inherit;
-webkit-appearance: none;
border-radius: 0;
padding: 0;
cursor: text;
}
.ff-input:focus {
outline: 0;
border-bottom: 1px solid #666;
}
.ff-label {
text-transform: uppercase;
letter-spacing: 0.1em;
}
/*i need to add here :placeholder-shown to the input but i dont know how i do it*/
.ff-container:focus-within > div+label {
cursor: text;
max-width: 66.66%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transform-origin: left bottom;
transform: translate(0, 2.125rem) scale(1.5);
}
<div class="ff-container">
<div class="ff-sub-container">
<input type="text" class="ff-input" placeholder="Your name here ..">
</div>
<label class="ff-label">Name</label>
</div>
PS:如果您需要更多信息,请告诉我
试一试。当您聚焦输入时,标签会出现在输入旁边。 除此之外,您的问题缺乏总体方向并且没有提供所需的视觉效果,因此您需要调整其余代码以满足您的需要。
.hidden {
display: none;
}
.form-group {
position: relative;
padding: 20px 0 0 0;
}
.form-control {
width: 50%;
}
.form-control:focus + label {
position: absolute;
top: 0;
left: 0;
background-color: red;
color: white;
width: 50px;
display: inline-flex;
}
<div ref="element" class="form-group">
<input class="form-control" type="text" ref="input">
<label class="col-form-label hidden">Test</label>
</div>