CODEWITHSUNDEEP
cssangular
koque
koque

Reputation: 2256

Embedding image in input field

I want to embed an image within an input field. I am using z-index but this is not working.

The markup looks like this:

<input class="form-control" type="text" id="cardNumber" name="cardNumber" 
  [(ngModel)]="payment.cardNumber" #cardNumber="ngModel" required>

  <img src="..\assets\images\csc.jpg" id="inputImage">

And the CSS:

#inputImage {
   height: 30px;
   width: 30px;
   position: absolute;
   /* left: 0px;
   right: 0px; */
   z-index: 1;
}

Upvotes: 0

Views: 239

Answers (2)

Vega
Vega

Reputation: 28738

You can also set the image as background:

HTML:

  <input type="text" class="date-picker">

CSS:

.date-picker{
    background: url(calendar.svg) no-repeat right;
}

DEMO

Upvotes: 0

d.moncada
d.moncada

Reputation: 17402

Are you looking to add an image to the input? If so, you can just set the background of the input to the image you want.

Html:

<input class="form-control" type="text" id="cardNumber" name="cardNumber" 
  [(ngModel)]="payment.cardNumber" #cardNumber="ngModel" required>

CSS:

#cardNumber{
   height: 30px;
   width: 300px;
   position: absolute;
   z-index: 1;
   background:url(https://cdn.pixabay.com/photo/2016/07/05/16/53/leaf-1498985_960_720.jpg) no-repeat right top; 
}

Fiddle: https://jsfiddle.net/zomzhacb/

Upvotes: 2

Related Questions