it_is_a_literature it_is_a_literature - 14 days ago 7
CSS Question

How to insert one of the camera image into the html element--input?

Here is the special camera,two cameras in one image.

enter image description here

The target web page.

enter image description here

To insert a camera image in the input element.

Restrictive condition:the two-cameras image cann't be slice into new image containing only one camera.

Here is my html file.

<html>
<head>
<style>
input{
width:538px;
height:50px;
background:url(camera.png) no-repeat scroll 510px 0;
}
</style>
</head>
<body>
<input type="text" maxlength="100" >
</body>
</html>


I can't display only one camera ,how to fix it?

enter image description here

Answer

It is one way.

HTML:

<div style="position:relative;display:inline-block;">
  <input type="text" maxlength="100" >
  <div class="camera-bg"></div>
</div>

CSS:

input{
    width:538px;
    height:50px;
   padding-right:40px;
    }
.camera-bg{
  position:absolute;
  top:20px;
  right:0;
  width:30px;
  height:20px;
   background:url(https://i.stack.imgur.com/5Vv2z.png) no-repeat ;
  background-position:0 0;
}

Codepen:

http://codepen.io/swapnaranjitanayak/pen/PbjLqXenter link description here