html - 数字字段的图像背景

Question

我目前有一个 Form: including Number field, image button, and image我想更改数字字段，以便背景是相似的图像。这是我的 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"/>  

我一直在摆弄 CSS，但似乎没有任何效果。这是我的尝试之一。

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

任何建议都会很棒!

Answer 1

您可以使用特定颜色作为背景或图像本身作为背景。

#timeField1{
background-color : #d1d1d1;   
}

或

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

还检查输入中的字体颜色以提高用户体验。