添加图标以使用 html 和 css 输入

Question

我需要使用 html 和 css 创建一个输入。

它必须有 icon ， placeholder ， icon 。

像这样：

我尝试通过这个 html 代码来创建它：

 <div class="username">
     <i class="fa fa-envelope icon"></i>
      <input type="text" placeholder="Username">
</div>
<div class="password">
     <i class="fa fa-envelope icon"></i>
      <input type="password" placeholder="Password">
</div>

这个css代码：

   .username input[type="text"]{
    padding: 5px;
    position: relative;
    border-radius: 2px;
    border:1px solid #ECF0EF;
    height: 35px;
    -webkit-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);

}
.username i{
    position: absolute;
    z-index: 9999;
    height: 10px;

    line-height: 2;
}
.password input[type="password"]{
    padding: 5px;
    position: relative;
    border-radius: 2px;
    border:1px solid #ECF0EF;
    height: 30px;
    -webkit-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);

}
.password input::after{
    content: '<i class="fa fa-envelope icon"> ';
}
.password  i{
    position: absolute;
    z-index: 9999;
    height: 10px;

    line-height: 2;
}

但它不起作用。

这是Demo

我怎么能这样创作？？

Answer 1

我对 CSS 和 HTML 做了一些更改（为另一张图片添加了另一个元素）。

app.component.css

.loginInput label{
    color: #A7AAB3;
}

/* EDITS START HERE */

.username,
.password {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 2px;
    border:1px solid #ECF0EF;
    height: 35px;
    -webkit-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
}

.username input[type="text"],
.password input[type="password"]{
    padding: 5px 27.5px;
    position: relative;
    border: none;
    background-color: unset;
}

.username i:first-child,
.password i:first-child {
  left: 7.5px;
    position: absolute;
    z-index: 9999;
}
.username i:last-child,
.password i:last-child {
    right: 7.5px;
    position: absolute;
    z-index: 9999;
}
.password input::after{
    content: '<i class="fa fa-envelope icon"> ';
}

/* EDITS END HERE */

.checkbox{
    float: left;
}

app.component.html

<div class="loginInput">
  <label>Or sign in with credentional </label>
    <div class="inputs">
      <div class="username">
        <i class="fa fa-envelope icon"></i>
        <input id="text" type="text" placeholder="Username">
        <!-- Added this line. -->
        <i class="fa fa-envelope icon"></i> 
      </div>
      <div class="password">
        <i class="fa fa-envelope icon"></i>
        <input type="password" placeholder="Password">
        <!-- Added this line. -->
        <i class="fa fa-envelope icon"></i>
      </div>
    <div class="rememberMe">
      <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
      <label for="styled-checkbox-1">Checkbox</label>
    </div>
  </div>
</div>

这是您的代码的一个分支，其中包含所做的更改：https://stackblitz.com/edit/angular-nq6j8u。

希望对你有帮助！

Answer 2

确保您已将 bootstrap 和 fontawesome 链接到您的 head 标签，然后您继续编写这些代码：

<div class="input-group mb-3">
    <div class="input-group-append">
        <span class="input-group-text"><i class="fas fa-user"></i></span>
    </div>
    <input type="text" name="" class="form-control input_user" value="" placeholder="username">
</div>
<div class="input-group mb-2">
    <div class="input-group-append">
        <span class="input-group-text"><i class="fas fa-key"></i></span>
    </div>
    <input type="password" name="" class="form-control input_pass" value="" placeholder="password">
</div>

然后你继续你的造型

Answer 3

我对究竟是什么不工作感到困惑

但您可以以此为指导 https://www.w3schools.com/howto/howto_css_login_form.asp

Answer 4

要向输入添加图标，通常使用标签。例如

<style> 


    .input-icons { 

        width: 100%; 

        margin-bottom: 10px; 

    } 



    .icon { 

        padding: 10px; 

        min-width: 40px; 

    } 



    .input-field { 

        width: 100%; 

        padding: 10px; 

        text-align: center; 

    } 

</style> 

<h3> 

  Icons inside the input element 

<div style="max-width:400px;margin:auto"> 

    <div class="input-icons">  

        <i class="fa fa-envelope icon"></i> 

        <input class="input-field" type="text"> 

        <i class="fa fa-padlock icon"></i> 

        <input class="input-field" type="password"> 

    </div> 

Answer 5

CSS content 属性不支持 HTML，它只支持纯文本，这就是为什么 ::after 中的图标不显示的原因。

由于在这种情况下您需要插入 HTML 内容，一个可能的解决方案是使用 Javascript（在此示例中为 jQuery）在文本输入之前和之后添加 <i> 元素。

至于 CSS，为了将图标定位在输入旁边，您可以使用 display: inline-block 并可能使用一些边距，而不是 position: absolute。

$(".username input, .password input").before("<i class='fa fa-envelope icon'></i>");
$(".username input, .password input").after("<i class='fa fa-envelope icon'></i>");

.username input[type="text"], .password input[type="password"]{
    padding: 5px;
    position: relative;
    border-radius: 2px;
    border:1px solid #ECF0EF;
    height: 35px;
    -webkit-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);

}
.username i, .password  i{
  display:inline-block;
  z-index: 9999;
  height: 10px;
  line-height: 2;
  margin: 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' />
<div class="username">
      <input type="text" placeholder="Username" />
</div>
<div class="password">
      <input type="password" placeholder="Password" />
</div>

编辑：如果你只能使用 HTML 和 CSS，除了在每次输入之前和之后对图标进行硬编码之外，没有什么可做的：

<i class="fa fa-envelope icon"></i>
<input type="text" placeholder="Username" />
<i class="fa fa-envelope icon"></i>

Answer 6

请确保在您的代码中标记了 fontawesome，这样代码就可以正常工作。