How to change the color of selected text using CSS ?

How to change the font-color of disabled input using CSS ?

Last Updated : 08 Aug, 2021

In this article, we are going to learn how to change the font-color of disabled input. There is a method to solve this problem, which is discussed below: Approach: With adding basic CSS property we are able to change the font-color of a disabled input. The disabled input element is unusable and un-clickable. This is a boolean attribute. Here using the color property of input we can change the font-color of this disabled input element. Below is the Syntax and implementation of the above approach: Syntax: HTML:

<input disabled>

CSS:

input:disabled {
    color: black;
}

Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to change font-color for
        disabled input using CSS?
    </title>

    <style>
        input {

            /*it makes grey background and 
            white font-color of a input*/
            background: grey;
            color: white;
        }
    
        input:disabled {
            /*css declaration to make 
            font-color of disable input
            black*/
            color: black;
        }
    </style>
</head>

<body>
    <form>
        Enable Input : <input value="Enabled"><br>

        <!-- Disabled this input using
            attribute: disable -->
        Disable Input: <input value="Disabled"
                    disabled><br>
    </form>
</body>

</html>

Output:

Explanations: First input element is enabled and the second input element is disabled. Using CSS properties we have an initialized background of all input elements as grey and font-color as white. We have to change white font-color of the disabled input to any color.

How to change the color of selected text using CSS ?

srijan_de

Improve

Article Tags :

Similar Reads

How to change the color of horizontal line (<hr> element) using CSS ?

The HTML <hr> tag is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The color of the <hr> tag can be set by using the background-color property in CSS.Example 1: In this example, the CSS within the <style> section custo

How to change the underline color in CSS?

In this article, we are going to learn how to change the underline color in CSS, To change the underline color in CSS, use the text-decoration-color property. Set it to the desired color value. Styling is implemented in HTML text to make it catchy and attractive. The text can be made italic, underli

How to Change Cursor Color using CSS?

Changing the cursor color using CSS is an easy way to make your website look nicer. While you can't change the mouse cursor itself, you can change the color of the text cursor (the blinking line) in input fields. This helps make the text areas stand out and match your website's style.Approach to cha

How to change style/class of an element using JavaScript ?

In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com

How to change the color of selected text using CSS ?

The colour of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on <h1> and <p> element and set its colour as yellow with green background. Below example implements the above approach: Example: html <!DOCTYPE h

How to Change the Color of Radio Buttons using CSS?

Here are three methods to change the color of radio Buttons using CSS:1. Using the accent-color PropertyThe accent-color property allows you to set the color of form controls like radio buttons and checkboxes.HTML<html> <head> <style> input[type="radio"] { accent-color: green; }

How to Make Text Input Non-Editable using CSS?

There are situations where you might want to create non-editable input fields. HTML and CSS both provide ways to achieve this.1. The read-only Attribute in HTMLThe read-only attribute in HTML is used to make a text input field non-editable, meaning users can see the content but cannot modify it. Thi

How to disable a link using only CSS?

To disable a link using CSS, pointer-events can be used, which sets whether the element in the page has to respond or not while clicking on elements. The pointer-events property is used to specify whether the element should respond to pointer events or not. The following example illustrates this app

How to set Input Fields with Black Border on Focus using CSS ?

The visual cues play a crucial role in guiding user interaction in web design. One common interaction is when users focus on input fields, such as text boxes or text areas, during form filling. To enhance the user experience, it's essential to provide clear feedback when an input field is in focus.

How to Add Background Color in Input and Text Fields using CSS ?

In this article, we will explore different approaches to adding background color to input and text fields using CSS. Customizing the appearance of input and text fields is an essential aspect of web design, and changing the background color is a powerful way to enhance the visual appeal of these ele