使用 html 和 css 将图标添加到输入

Question

i need to create a input with html and css.

it must have icon, placeholder, icon in that.

like this:

i try to create this by this html code:

 <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>

and this css code:

   .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;
}

but it not worked.

this is Demo

how can i do create like that??

Answer 1

I made a couple of changes to the CSS and HTML (added another element for the other image).

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>

Here is a fork of your code with the changes made: https://stackblitz.com/edit/angular-nq6j8u .

Hope it helps!

Answer 2

Make sure you have linked bootstrap and fontawesome to you head tag, then you proceed by coding these:

<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>

then you continue with your styling

Answer 3

The CSS content attribute does not support HTML, it only supports plain text, this is why the icon in ::after is not showing.

As you need to insert HTML content in this case, a possible solution could be to use Javascript (and jQuery in this example) to add the <i> element before and after the text inputs.

As for the CSS, for positioning the icons next to the input, you can use display: inline-block and possibly some margin, instead of 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>

Edit: And if you can only use HTML and CSS, there is not much to do, other than hard-coding the icons before and after each input:

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

Answer 4

Am confused as to what exactly didn't work

But you can use this as a guide https://www.w3schools.com/howto/howto_css_login_form.asp

Answer 5

To add an icon to an input, the tag is usually used. Eg

<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 6

Please be sure that fontawesome is tagged in your code, with that, the code will work fine.