Background image for numerical input field

I am currently working on customizing a form that includes a Number field, image button, and an image. My goal is to change the background of the number field to be a similar image. Below is the HTML code I have been using:

<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 have tried experimenting with CSS to achieve this, but so far nothing has worked. Here is one attempt I made:

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

I would appreciate any advice or suggestions on how to accomplish this!

htmlcss

Answer №1

One option is to utilize a specific color for the background or use an image as the background itself.

#timeField1{
background-color : #d1d1d1;   
}

Alternatively, you can do the following:

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

It's also important to consider the font color in input fields for better user experience.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigate to the following section by scrolling down, and return to the previous section by scrolling up

Currently, I am working on a portfolio website for a filmmaker and I have a specific requirement. As users scroll down the window, I want the page to smoothly transition to the next section, and when scrolling up, I want it to go back to the previous secti ...

javascriptjqueryhtmlcssweb

The CSS code seems to be refusing to connect and cooperate with the Spring Boot application

https://i.sstatic.net/CUrYN.png This is an image of my current project. I have placed my css file in the static/css folder and I am attempting to connect it to my index.jsp page, but unfortunately, it is not functioning as expected. I have already tried ...

cssspringspring-boot

Ensure that two text boxes are checked to confirm they are not empty and do not contain the value 0

I have a custom function that retrieves hours, rates, and tax deductions, then calculates them and displays the result. The function is currently functioning properly. var newtax= new Number(dep[i]); taxrate = newtax*100; var h=eval(document.paycheck.h ...

javascripthtml

Step-by-step guide for activating a text box when a check box is marked

I'm looking to activate and deactivate two text boxes when a check box is selected. Currently, only one text box is enabled when the check box is checked. How can I modify my code to enable and disable two text boxes based on the check box status? Her ...

javascriptjqueryhtml

The rating and comment section is failing to adapt to smaller screens, creating a terrible user experience

I am a beginner with Sass and CSS. I wanted to create a rating and comment section which looks fine on a laptop screen, but appears off on smaller screens. It seems like the layout might be incorrect or maybe I didn't follow grid layout guidelines pro ...

cssbootstrap-4sass

Proper Sequence of Bootstrap Header Configuration

I'm working on creating a header/navbar using bootstrap, but I'm unsure about the correct order and method to achieve this. This is how I want it to look: And when collapsed: Should everything be contained within the NAV tag? I have a header ...

htmltwitter-bootstrap-3navbar

The output in the window will display the result of doubling the input box value, not the div

Can someone help me figure out why my code isn't working as expected? I'm trying to create a text box where you can enter a number, click a button, and it will multiply the number by two and display the result. However, right now, the code opens ...

javascripthtmlbuttoninputparsefloat

Struggling to make jQuery apply .css("display", "block") upon clicking a link

I am having trouble with getting jQuery to display CSS properties when a link is clicked on. After testing the CSS properties, I found that setting the display to "block" in the style sheet works as expected. However, if I set the initial CSS display to " ...

jqueryhtmlcss

Expanding the table area in bootstrap

I am currently working on a video slider using bootstrap. I have added a table within the slider (carousel) and it is functioning perfectly. However, I am now looking to update the layout to resemble the image below. I have successfully applied the backgro ...

htmlcsstwitter-bootstraphtml-table

Unexpected disappearance of form control in reactive form when using a filter pipe

Here is a reactive form with an array of checkboxes used as a filter. An error occurs on page render. Cannot find control with path: 'accountsArray -> 555' The filter works well, but the error appears when removing any character from the fi ...

javascripthtmlangularangular-pipe

Steps for including an animation class in a div

Is it possible to add the sweep to top blue color animation to the red box using a set-timeout function instead of hover? I tried using the following code but it doesn't seem to be working. Can you help me troubleshoot? setTimeout(function() { $( ...

javascriptjquerycss

Tips for utilizing CSS perspective to align a div so it seamlessly fits within an SVG laptop display

Confusion may arise from the question at hand. My goal is to utilize CSS to absolutely position a div with perspective in a way that resembles it being inside the laptop screen I created with an SVG. I am under the impression that achieving this effect is ...

htmlcssperspective

Position the center button on the Bootstrap navbar while keeping it outside the collapse menu

I want a button in the navbar that: stays inline with other navbar items (doesn't go to the next line); sits outside of the collapsed navbar section; and remains centered on the page for all screen sizes, even when the right side of the navbar is c ...

csstwitter-bootstrap

Cannot submit form data from HTML to PHP

I am having trouble passing data from an HTML form to a PHP page. The form data is not being submitted successfully. Can anyone point out what mistake I might be making? HTML FORM <div id="go"> <form method="get" action="client_authorized.ph ...

phphtmlforms

Set the CSS/HTML to make two child elements occupy 50% of the height of the parent container div

This task seems deceptively simple, yet I am struggling to find a straightforward solution. Language: (HTML) <div class="col-6-12 subcontent-outer"> <div class="subcontent"> <h1>Header</h1> ...

htmlcss

Divide the space evenly with minimal gaps

I've been trying to use examples from the web, but I just can't seem to get it right. Who better to ask than you guys? I want to evenly distribute id="klip". I have set their widths to 18% so that each space is 2%. Here's how it looks now: ...

htmlcss

Using `appendChild` in combination with `createElement`

Is there a difference between these two approaches: var div = document.createElement('div');//output -> [object HTMLDivElement] document.getElementById('container').appendChild(div); and: var div = '<div></div>&a ...

javascripthtmlappendchild

Tips for maintaining the responsiveness of both images and text within a div container

I'm completely new to HTML and CSS. Everything looked perfectly aligned until I added text inside the three divs and now my images are unbalanced, even though I've set the same width and height: Here is the code snippet: #wrapper{ display:fl ...

htmlcssgoogle-web-designer

Attempting to change the appearance of Bootstrap4 checkboxes

I am attempting to recreate a custom checkbox design that I found on Codepenhere However, the use of Bootstrap 4 in the rest of my project seems to be interfering with my custom checkbox style. Here is my test version My testhere I have added a .myCheck ...

cssbootstrap-4

How to Centre Align Items in a React Native ListView

Is there a way to center align the items in a ListView without using another View wrapping the ListView? Currently, all the items are left aligned. ListView Code Snippet <ListView dataSource={this.state.dataSource} renderRow={this.renderItem} ...

ioscsslistviewreact-native