我正在努力使label
直接位于input
字段之上,我想要一个图标显示 next 到input
1}}字段。
@import url("//fonts.googleapis.com/icon?family=Material+Icons");
input,
label {
display: block;
}

<div>
<label for="username">Username</label>
<input id="username" placeholder="Username" class="">
<i class="material-icons">accessibility</i>
</div>
&#13;
我可以使用上面的CSS获取label
上方的input
。
但是如何获得输入字段旁边的icon
?
答案 0 :(得分:1)
输入必须显示为内联块
label {
display: block;
}
input {
display: inline-block;
}
答案 1 :(得分:1)
@import url("//fonts.googleapis.com/icon?family=Material+Icons");
label {
display: block;
}
input{
display:inline;
}
<div>
<label for="username">Username</label>
<input id="username"
placeholder="Username"
class="">
<i class="material-icons">accessibility</i>
</div>
答案 2 :(得分:0)
对于那些在搜索中遇到此帖子的人,MaterializeCSS存储库上有一个线程以各种方式实现此目的。参见:https://github.com/Dogfalo/materialize/issues/1214
我正在使用amikeret在此回复中发布的解决方案:https://github.com/Dogfalo/materialize/issues/1214#issuecomment-430598527
他的代码是
.input-field {
// Add inset definition to .prefix
.prefix {
&:not(.inset) {
& ~ input,
& ~ textarea,
& ~ label,
& ~ .validate ~ label,
& ~ .helper-text,
& ~ .autocomplete-content {
margin-left: 3rem;
}
}
&.inset {
& ~ input,
& ~ textarea,
& ~ label,
& ~ .validate ~ label,
& ~ .helper-text,
& ~ .autocomplete-content {
margin-left: 0; // This is a patch until it's incorporated into the framework
padding-left: 3rem;
}
}
}
// Suffix Icons
.suffix {
position: absolute;
width: $input-height;
font-size: $input-icon-size;
transition: color .2s;
top: ($input-height - $input-icon-size) / 2;
right: 0;
text-align: right;
&.active { color: $input-focus-color; }
}
.suffix {
& ~ input,
& ~ textarea,
& ~ label,
& ~ .validate ~ label,
& ~ .helper-text,
& ~ .autocomplete-content {
width: calc(100% - 3rem);
}
&:not(.inset) {
& ~ input,
& ~ textarea,
& ~ label,
& ~ .validate ~ label,
& ~ .helper-text,
& ~ .autocomplete-content {
margin-right: 3rem;
}
}
&.inset {
& ~ input,
& ~ textarea,
& ~ label,
& ~ .validate ~ label,
& ~ .helper-text,
& ~ .autocomplete-content {
padding-right: 3rem;
}
}
}
.suffix ~ label { margin-right: 3rem; }
&.col {
.suffix ~ label,
.suffix ~ .validate ~ label {
width: calc(100% - 3rem - #{$gutter-width});
}
}
// What if we have both prefix and suffix?
.prefix ~ .suffix ~ input {
width: calc(100% - 6em);
}
&.col {
.suffix ~ .suffix ~ label,
.suffix ~ .suffix ~ .validate ~ label {
width: calc(100% - 6rem - #{$gutter-width});
}
}
}
// Inset icons
.material-icons {
&.inset {
font-size: $input-icon-size * .75;
top: ($input-height - $input-icon-size) / 2 * 1.5;
}
&.actionable {
cursor: pointer;
z-index: 2;
}
}