How to insert pictures into input with css

Css method to insert pictures in input: first set the child element in the div containing the input; then set the outer div positioning to relative; then set the span positioning to absolute; finally add the margin-left attribute to the input That’s it.

The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Recommended: css video tutorial

css insert pictures into input

1. Set in the div containing input Child element

<div class="search">
    <span></span>
    <input type="text">
</div>

2. Set the outer div positioning to relative

.search{
    position: relative;
}

3. Set the span positioning to absolute, and set the width, height and background image

.search > span{
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(./search.png) no-repeat;
    background-size: 80% 80%;
    background-position: center;
}

4. Add margin-left attribute to input.

.search > input{
    width: 100%;
    padding-left: 20px;
}

5. Rendering

The above is the detailed content of How to insert pictures into input with css. For more information, please follow other related articles on the PHP Chinese website!