HTML Readonly for a Select Tag

  2. HowTo
  3. HTML Howtos
  4. HTML Readonly for a Select Tag
Migel Hewage Nimesha Feb 19, 2023
HTML HTML Form
  1. the <select readonly> Attribute
  2. Use the <select disabled> Attribute to Emulate the readonly Attribute for a select Tag in HTML
  3. Use the pointer-events: none Attribute to Emulate the readonly Attribute for a select Tag in HTML
  4. Conclusion
HTML Readonly for a Select Tag

HTML, Hyper Text Markup Language, is widely used in formatting websites. Also, CSS (Cascading Style Sheets) can be used in styling formatted websites.

Below are some attributes used in HTML and CSS to control the behavior of the user and the cursor.

the <select readonly> Attribute

<select> is the most commonly used HTML tag to get user inputs from the keyboard, mouse, or touch screen. Typically, using <select> allows users to pick one or more options, while using <select readonly> lets users only display the value rather than altering it.

The readonly attribute specifies the input elements are non-editable and read-only. Also, text, URL, telephone number, email, password, date, month, week, time, and number are the supported formats for readonly.

Syntax:

<select readonly>

But <select readonly> is not valid in HTML nowadays as it is already deprecated. Instead of that, we can use the disabled attribute.

Use the <select disabled> Attribute to Emulate the readonly Attribute for a select Tag in HTML

The disabled attribute is a Boolean attribute used in specifying the dropdown list is disabled. Using disabled enables the elements to be unclickable and unusable and gets rid of control from users.

Also, the input field displays as not applicable and disables the ability to use.

Syntax:

<select disabled>

Let us elaborate on this syntax with an example by creating a dropdown list to get a clearer idea.

Example Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML disabled Attribute</title>
    </head>
    <body style="text-align: center;">
        <h1 style = "color: brown;"> HTML Select Disabled Attribute </h1><br>
        <p style="color: black; font-size: large"> What is your Home Country? </p>
        <p style="color: grey"> (Selection of choice is disabled) </p>

        <select disabled>
                <option value="Sri Lanka">Sri Lanka</option>
                <option value="India">India</option>
                <option value="Turkey">Turkey</option>
        </select>
    </body>
</html>

First, we opened an HTML file by defining its meta charset with the title HTML disabled Attribute and opened <body> with all the elements styled to keep the content centered after closing the <head>.

Then, we defined the name of the heading as HTML Select Disabled Attribute with <h1> and brown color. We got a line break after the heading by using <br>.

Then defined a question, What is your home country? using <p> and with a large font size and black color. After that, we defined a phrase (Selection of choice is disabled) with a grey color.

Then the <select disabled> is used to disable the dropdown list. Even if it is disabled with the <select disabled>, we have defined some values for it as Sri Lanka, Turkey, and India.

At the end of the HTML file, all tags used are closed consequently.

According to the output, the disabled dropdown list is grey and out of user control. Users can’t click or choose options from the dropdown list; that’s how the <select disabled> function works.

The difference between readonly and disabled is that using readonly supports users to view the inputs they have provided, while disabled provides users with unclickable elements.

Use the pointer-events: none Attribute to Emulate the readonly Attribute for a select Tag in HTML

pointer-events is another method we can use instead of <select readonly>. Even readonly supports users at least to view when using none along with the pointer-events property; it disables the user’s arrow click events.

Overall, the pointer-events property controls the reactions of the cursor by managing the activities such as responding to mouse events, hovering, clicking, and more. The pointer-events with the none attribute prevent all clicks and control the cursor’s behavior on elements.

Syntax:

pointer-events: none;

Let us define how pointer-events behave with the none attribute through an example using two links in Social Media. In this example, we created an HTML and a CSS file.

HTML Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Using none in Pointer Events</title>
    </head>
    <body>
        <p> Social Media </p>
        <ul>
            <li><a href="https://www.facebook.com">Facebook</a></li>
            <li><a href="https://www.whatsapp.com">Whatsapp</a></li>
        </ul>
    </body>
</html>

Following the above HTML code, first, we have defined the document type as HTML and the meta charset after opening the <head>. Also, we have linked the style.css file using the href and have defined a title as Using none in Pointer Events.

Once closing the <head>, opened <body> and created an unordered list named Social Media along with two list items: Facebook and Whatsapp, with their associated links.

style.css Code:

p{
    font-size: 40px;
    color: blue;
}

li{
    font-size: 20px;
    color: brown;
}

a[href="https://www.whatsapp.com"]{
    pointer-events: none;
}

First, we defined the paragraph Social Media to appear in blue with a size of 40px in the styles.css. Also, the list of items is in brown with a font size of 20px.

The pointer-events with the none attribute is applied for one social media link to see the difference.

As you can see in the above output, when we move the cursor to Facebook, it shows a hand sign. But when we move the cursor to Whatsapp, it only remains as an arrow sign.

We hope you have gotten the idea of the pointer-event: none functionality through this example.

Conclusion

Overall, throughout the above content, we have discussed limiting the user access to input elements and selecting and pointing them out. Even though there are many other methods, we have discussed only a few.

Even using <select readonly> is an already deprecated method in HTML5. Instead of using it, we can achieve an output similar to it using the abovementioned techniques.

Author: Migel Hewage Nimesha
Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

Related Article - HTML Form