CODEWITHSUNDEEP
htmlcss
Mike
Mike

Reputation: 133

Image background for a number field

I currently have a Form: including Number field, image button, and image and I want to change the number field so that the background is a similar image. Here's my HTML

<form name="form1" id="form1" action="sendSMSTelstra.php" method = "post">
<input type="number" class="input" min ="0" max = "1440" onChange="checkFilled(1);" name="timeField1" id="timeField1" value="">
 <input type="image" name="imageField1" id="imageField1" onmouseup= "SendCMD(1)" onmousedown="changeImage(1)" src="img/ButtonBlueb.png" width="42" height="42" value="">

    <img src="img/on.png" alt="" width="40" height="40" id="IO1" name="IO1"/>

I've been fiddling around with CSS, but nothing seems to work. Here's one of my attempts.

                       .input
                            {
                                border: 0px solid #444444;
                                height:39px;
                                width:50px;
                                background:url(img/white.png) no-repeat right top; 
                                padding-left:4px; 
                                }

Any advice would be great!

Upvotes: 0

Views: 78

Answers (1)

pratikpawar
pratikpawar

Reputation: 2098

You can use specific color for background or image itself as a background.

#timeField1{
background-color : #d1d1d1;   
}

OR 

 #timeField1{
 background-image : url('img/on.png');   
 background-size: 80px 15px; /*optional*/
 }

also check for font color in input for user experience.

Upvotes: 1

Related Questions