我想在字段的同一行放置面部图标。代码是这样的:
<i class="material-icons">face</i>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
结果是这样的:
如何将图标和字段放在同一行?
谢谢
最佳答案
以电子邮件地址/电子邮件图标为例。
HTML
将图标添加为文本字段的子元素
<div class=
"mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-upgraded"
data-upgraded=",MaterialTextfield">
<input class="mdl-textfield__input" id="textfield-EmailAddress" type=
"email">
<label class="mdl-textfield__label" for=
"textfield-EmailAddress">Email Address</label>
<span class="mdl-textfield__error">Please Enter Valid Email Address</span>
<i class="material-icons mdl-textfield__label__icon">mail</i>
</div>
CSS
.mdl-textfield__label__icon {
position: absolute;
right: 0;
top: 20px;
}
所需资源
您需要同时加载 MDL CSS 和 Material Design 图标
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
MDL JS 将有助于动态行为
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"> </script>
例如,您可以让图标在聚焦时变为与输入相同的“事件”颜色
.mdl-textfield.is-focused .mdl-textfield__label__icon, .mdl-textfield.is-invalid.is-focused .mdl-textfield__label__icon {
color: rgb(63,81,181);
}
如果您希望图标左对齐,您可以调整上面的 CSS,但还需要调整输入的填充以确保输入的文本不会与图标冲突。上面的解决方案仍然可行,但图标右对齐不太可能发生
关于icons - Material Design Lite - 如何将内联图标放入表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36361404/