Ways to assign a CSS class specifically for images

Question

Ways to assign a CSS class specifically for images

.calendarList {  
       background-image: url('/resource3/hpsc/common/images/calendar.png');
       background-position: 135px 50%;
       background-repeat: no-repeat;
       cursor:pointer;
}

<input type="text" id="toDatepicker" class="calendarList" name="searchEndDate" size="20" >

The CSS class is being applied exclusively to input text fields. When hovering over the text field, the cursor displays a hand symbol for the entire input field. However, the intention is to only display the hand symbol for the image, not the entire text field.

javascript jquery css

Answer 1

Answer №1

It seems like the task you're attempting may not be achievable.

One potential solution could be to insert the image as a standard image (not a background) and utilize position: absolute and z-index properties to position it either behind or in front of the textbox.

Answer 2

It seems like the task you're attempting may not be achievable.

One potential solution could be to insert the image as a standard image (not a background) and utilize position: absolute and z-index properties to position it either behind or in front of the textbox.

Answer 3

Answer №2

If you want to achieve this effect using JavaScript, it can be quite complex. A simpler solution would be to use the image as a label instead of a background picture and position it over the input field.

<input type="text" id="toDatepicker" class="calendarList" name="searchEndDate" size="20" >
<label for="toDatepicker" id="datepickerLabel>
    <img src="/resource3/hpsc/common/images/calendar.png" />
</label>

CSS:

#datepickerLabel {
    position:relative;
    left:-20px;
    cursor:pointer;
}

For a demonstration, you can check out http://jsfiddle.net/tNwTz/.

Answer 4

If you want to achieve this effect using JavaScript, it can be quite complex. A simpler solution would be to use the image as a label instead of a background picture and position it over the input field.

<input type="text" id="toDatepicker" class="calendarList" name="searchEndDate" size="20" >
<label for="toDatepicker" id="datepickerLabel>
    <img src="/resource3/hpsc/common/images/calendar.png" />
</label>

CSS:

#datepickerLabel {
    position:relative;
    left:-20px;
    cursor:pointer;
}

For a demonstration, you can check out http://jsfiddle.net/tNwTz/.

Ways to assign a CSS class specifically for images

Answer №1

Answer №2

Similar questions

Issue with jQuery - Exchanging positions of two elements fails after the initial swap

Explore the Benefits of Using MUI V5 Grid Component for Your Box Design

Error encountered during Heroku deployment: "sh: 1: tailwind: not found"

What is the CSS solution for eliminating a line break immediately following the first word?

Modify URL parameters using history.pushState()

Having trouble initiating an AJAX call in Django and returning values to my form

Can the useEffect hook prevent the page from rendering?

Using a promise instead of resolving it with Angular's $q.then() methodology

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

Building and executing an Angular 2 program on the Windows platform: Step-by-step guide

Creating a line of functions pool in Javascript with a delay feature

Tips for extracting the chosen value from a dropdown list within a table cell using JavaScript

Creating elegant text in HTML using only CSSLearn how to design stylish text using CSS without any additional code

Symfony2 asynchronous validation

Getting dynamic variables in the `getStaticProps` function of NextJS can greatly enhance

One way to automatically pass a default date parameter to an AJAX GET call in JavaScript is to set the initial date value before making the request. As the

Sending specific names as properties

How can you reference the immediate selector object using jQuery?

Expanding the `div` element to visually occupy the entire vertical space

Having completed "npm link" and "npm i <repo>", the module cannot be resolved despite the presence of "main" and "types" in the package.json file