css readonly input textbox not changing background color when set

I've come across an old Classic ASP form that requires additional functionality, and I'm currently using IE11. To address this, I decided to include a doctype like so (even though I'm unsure of its necessity):

<!DOCTYPE html>

In my CSS file, I made the following addition:

input[readonly] {
    background-color: #f6f6f6;
}

I spotted recommendations on other pages of the site to change the background-color of a readonly textbox, but unfortunately the color isn't changing as expected!

The HTML markup in question is:

<input type="TEXT" readonly name="ORDERNO" value="<%=OrderNo%>" style="width:177px">

Any insights into why this isn't working? From what I can tell, there aren't any conflicting styles overriding it. Is there any other information I should provide to help clarify my issue?

htmlcssreadonly-attribute

Answer №1

I just finished creating a JSFiddle example that is fully functional. Check out the link below:

Feel free to experiment with changing the background color to something vibrant.

<input type="TEXT" readonly name="ORDERNO" value="<%=OrderNo%>" style="width:177px"

input[readonly] {
    background-color: blue;
}

https://jsfiddle.net/abcdefg123/

Answer №3

There are numerous sources online claiming that IE does not fully support the Readonly attribute. You can check out the following links for more information: w3schools, MDN, css-tricks. It is recommended to consider using a JavaScript or JQuery solution instead.

For instance:

$(':input[readonly]').css({'background-color':'#f6f6f6'});

This code snippet may be of assistance. Here's a Fiddle link

Answer №4

It's possible that the current CSS is being overridden by existing styles. Try using 'background-color':'#f6f6f6' !important; and see if that solves the issue.

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

Choose does not showcase the updated value

My form contains a form control for currency selection Each currency object has the properties {id: string; symbol: string}; Upon initialization, the currency select component loops through an array of currencies; After meeting a specific condition, I need ...

htmlangulartypescriptforms

What is the best way to have an image trail another in JavaScript coding for my game?

Hey, can someone help me create a zombie game where a zombie image moves towards a player image (zs.png) at a specific speed and decreases the player's health upon contact? This game is designed for the 3ds browser, so it must be coded in JavaScript ...

javascripthtml

extract various information from a csv file

Having trouble reading items from a CSV file and adding them to an input form? When using a specific option value that allows you to add items by pressing comma, it doesn't work when reading from the .csv file. What could be causing this issue? with ...

htmlpython-3.xcsvflask

Tips for choosing a specific set of list items using HTML

In my application, I have a list that is divided into sections like "currently viewing as," "recently viewed," and "staff." All elements in the list share the same classes, making it difficult to identify a specific list element in a particular section, su ...

javahtmlselenium-webdrivertestnghtml-lists

PHP mail function does not properly align HTML table outputs

After fetching data from the database and inserting it into an HTML table, everything appears fine. However, upon pressing the send button to email the content, sometimes the alignment of the HTML table is disrupted in the email. It seems like specific col ...

phphtmlcssphpmailer

The public folder in Node.js is known for its tendency to encounter errors

I'm facing an issue with displaying an icon on my website. Here is the current setup in my code: app.js const http = require('http'); const fs = require('fs'); const express = require('express') const path = require(&apo ...

javascripthtmlnode.jsexpress

Arranging an image next to a text input in Bootstrap 5: A step-by-step guide

I want to align a magnifying glass image next to a text input on the left side. However, it is currently displaying above the text input. How can I make sure they are positioned side-by-side using Bootstrap 5? <link rel="stylesheet" href="https://c ...

htmlcsstwitter-bootstrapbootstrap-5

Tips on saving php variable content in HTML "id"

Three variables are used in PHP: message_id, message_title, and message_content. Their content is stored inside HTML 'id' for later use with jQuery. Example: Variables: $id_variable = $rows['id_mensagem']; $message_title_edit = $rows ...

javascriptphpjqueryhtml

Showing pictures from a database utilizing PHP and HTML

I'm looking to showcase the images stored in my database within an HTML table. The files are saved as 'BLOB' and I want them to appear under the 'Photo' column. Can anyone guide me on the code needed to display these images? ...

phphtmlimageblobecho

Using SCSS to apply a class in Next.js

Currently, I am working on a project using Next.js and implementing the SCSS module procedure for styling. An example component directory structure is as follows: SampleComponent -> index.tsx and SampleComponent.module.scss The code in SampleComponent ...

javascriptcssreactjssassnext.js

The function of jQuery's .prop('defaultSelected') appears to be unreliable when used in Internet Explorer 9

Below is the code I am currently using: $selects = $('select'); $selects.val( $selects.prop('defaultSelected')); The purpose of this code is to reset the values of all select elements on my webpage. However, I am facing an issue in IE ...

javascriptjqueryhtmlbackbone.js

What could be causing the submit button on this form to not be centered by this CSS?

I have been attempting to center this submit button using CSS, however, despite researching various online resources, I have not yet discovered a solution. It seems strange that such a simple task is proving to be so challenging. td.class > div { w ...

htmlcss

Ensure images are correctly aligned

Could really use some help with this issue I'm having. It's probably a simple fix for all you experts out there, but I can't seem to align my images properly so they are even and not one higher than the other. Please take a look at the scree ...

htmlcssimage

Divide the webpage into four equal sections, each showcasing distinct information sourced from the database

Is there a way to divide my page into 4 sections with data from a database source? Currently, I am displaying the data from the database in a single table, but I would like to split it into four parts, each showing different results from the database. Ad ...

phphtmlmysql

JavaScript PIP video feature

Currently, I am utilizing the requestPictureInPicture function to display the HTML video element in a popup window. However, I have encountered an issue where the size is restricted to approximately 920 x 540 when in Picture-in-Picture mode. I am wonderin ...

javascripthtmlreactjs

Why does CSS work on Localhost but not on the server in IE?

I recently faced a bizarre issue. After designing a website using CSS3, I uploaded it to the server only to discover that most of the features are not supported by IE8, making the site layout unrecognizable. Even more strange was the fact that IE8 display ...

htmlcssinternet-explorerinternet-explorer-8

How can one effectively locate a specific element in an HTML document?

Using Beautiful Soup 4, I have successfully written code that scrapes online data from a webpage. My current challenge involves extracting data from a table, specifically targeting the 4th row. Is there a way to pass an argument to the .find() method to sk ...

pythonhtmlbeautifulsoup

How to toggle the display of a div by its id using index in Javascript

Currently, I am encountering a problem with toggling the div containers. When I click on the video button, I want the other divs to close if they are already open. However, due to the toggling mechanism, if a div is closed and I click on the corresponding ...

javascripthtmlangular

What is the method for adding an HTML tag that includes an md-checkbox and md-icon?

I am currently utilizing angular material and angular js to dynamically add a new HTML div when a certain function is triggered from the view. Here is my view setup: <div id = "main_row" ng-click="defCtrl.submit()"> </div> This is wh ...

javascriptjqueryhtmlangularjsangular-material

Initiate the video tag playback by using jquery.play() function

Is there a way to make the video start playing as soon as the overlaying absolute div has faded out? I've tried using javascript and autoplay, but it doesn't seem to work without controls enabled. Any suggestions? Check out the HTML code below: ...

jqueryhtmlvideohtml5-video