如何在输入标签内插入图标
How to insert icon inside input tag
我想将图标放在 input 标签内,但它总是在 input 的底部。我实际上使用了 bootstrap 但为此我使用了自定义样式
这是 html:
<div class="form-group">
<label for="password" class="text-secondary">Password</label>
<div class="input-group">
<input id="password" type="password" class="form-login @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
<div class="input-group-append">
<span class="input-group-text" onclick="password_show_hide();">
<i class="fas fa-eye" id="show_eye"></i>
<i class="fas fa-eye-slash d-none" id="hide_eye"></i>
</span>
</div>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
这是 css:
.form-login{
display: block;
width:100%;
font-size: 1rem;
font-weight: 400;
line-height:1.5;
border-color: #009DA9 !important;
border-style: solid !important;
border-width: 0 0 1px 0 !important;
padding: 0px !important;
color:black;
height: auto;
border-radius: 0;
background-color: #fff;
background-clip: padding-box;
}
.form-login:focus{
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: none;
}
它现在的样子:
我想要的样子:
您可以使用绝对位置将图标定位在输入上。
您可能需要稍微更改 top
值和 padding-right
值。检查下面片段中的评论
.input-group {
position:relative;
display:inline-block;
}
.input-group-text {
position: absolute;
right:0;
top: 0;
}
input {
padding-right: 20px; /* = icon width if you don't want the password to go under the icon */
}
<div class="input-group">
<input id="password" type="password" class="form-login" />
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-eye" id="show_eye">icon</i>
</span>
</div>
</div>
您可以使用绝对位置将图标定位在输入字段上。检查我在下面发布的代码:
.form-group {
width: 50%;
position: relative;
}
.form-group i {
position: absolute;
right: 0px;
}
.icon {
padding: 10px 0px;
color: grey;
min-width: 5px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
border-radius: 10px;
border-color: solid lightgray;
}
<div class="form-group">
<label for="passowrd">Password</label>
<div class="input-set">
<i class="fas fa-lock icon">icon</i>
<input id="password" name="password" class="input-field" type="text" placeholder="password" />
</div>
</div>
我想将图标放在 input 标签内,但它总是在 input 的底部。我实际上使用了 bootstrap 但为此我使用了自定义样式
这是 html:
<div class="form-group">
<label for="password" class="text-secondary">Password</label>
<div class="input-group">
<input id="password" type="password" class="form-login @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
<div class="input-group-append">
<span class="input-group-text" onclick="password_show_hide();">
<i class="fas fa-eye" id="show_eye"></i>
<i class="fas fa-eye-slash d-none" id="hide_eye"></i>
</span>
</div>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
这是 css:
.form-login{
display: block;
width:100%;
font-size: 1rem;
font-weight: 400;
line-height:1.5;
border-color: #009DA9 !important;
border-style: solid !important;
border-width: 0 0 1px 0 !important;
padding: 0px !important;
color:black;
height: auto;
border-radius: 0;
background-color: #fff;
background-clip: padding-box;
}
.form-login:focus{
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: none;
}
它现在的样子:
我想要的样子:
您可以使用绝对位置将图标定位在输入上。
您可能需要稍微更改 top
值和 padding-right
值。检查下面片段中的评论
.input-group {
position:relative;
display:inline-block;
}
.input-group-text {
position: absolute;
right:0;
top: 0;
}
input {
padding-right: 20px; /* = icon width if you don't want the password to go under the icon */
}
<div class="input-group">
<input id="password" type="password" class="form-login" />
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-eye" id="show_eye">icon</i>
</span>
</div>
</div>
您可以使用绝对位置将图标定位在输入字段上。检查我在下面发布的代码:
.form-group {
width: 50%;
position: relative;
}
.form-group i {
position: absolute;
right: 0px;
}
.icon {
padding: 10px 0px;
color: grey;
min-width: 5px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
border-radius: 10px;
border-color: solid lightgray;
}
<div class="form-group">
<label for="passowrd">Password</label>
<div class="input-set">
<i class="fas fa-lock icon">icon</i>
<input id="password" name="password" class="input-field" type="text" placeholder="password" />
</div>
</div>