Changing Underline Color

Changing Underline color

No. The best you can do is to use a border-bottom with a different color, but that isn't really underlining.

How to change textField underline color?

** See update below or see the answer by @GJJ2019 **

The logical answer would be to use an InputBorder, particularly an UnderlineInputDecorator, and pass it in to the inputdecorator as the border. However, all this does is tell the InputDecorator whether is should use an underline or whatever else you specify.

The actual color is based on the theme - from the source:

Color _getActiveColor(ThemeData themeData) {
  if (isFocused) {
    switch (themeData.brightness) {
      case Brightness.dark:
        return themeData.accentColor;
      case Brightness.light:
        return themeData.primaryColor;
    }
  }
  return themeData.hintColor;
}

So to change the colour do something like this (or specify the theme for your entire application):

new Theme(
  data: new ThemeData(
    primaryColor: Colors.red,
    accentColor: Colors.orange,
    hintColor: Colors.green
  ),
  child: new TextField(
    decoration: new InputDecoration(
      hintText: "Enter your email",
      labelText: "Email",
      labelStyle: new TextStyle(color: const Color(0xFF424242)),
      border: new UnderlineInputBorder(
        borderSide: new BorderSide(
          color: Colors.red
        )
      )
    ),
  ),
),

UPDATE:

This is now possible to do in the way you'd expect it to work.

decoration: InputDecoration(        
  enabledBorder: UnderlineInputBorder(      
    borderSide: BorderSide(color: theColor),   
  ),  
  focusedBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: theColor),
  ),
  border: UnderlineInputBorder(
    borderSide: BorderSide(color: theColor),
  ),
)

Changing a link underline color

If what you mean is a different underline color than what the text is, the only thing I can think of is to add a span around the link:

<span class='underline'>
    <a href="#">this just<br>a test<br>of underline color</a>
</span>

And then the CSS:

span.underline { 
    color: red; 
    text-decoration: underline; 
} 
span.underline a { 
    color: blue; 
    text-decoration: none; 
}

And you get what you want.

EDIT:

Testing this a little further, it is not working for me on IE. If you add border-bottom, however, it surprisingly does work in all browsers, except that IE does not put a border under the last one. I will try to dig a little deeper to see if there's a cross-browser way to do this...

How can I change the underline color in tailwind css

There is no way to do that using the default tailwindcss build.

There are 2 ways to override the underline color:

Using simple CSS on your global CSS file

.underline {
    text-decoration-color: red;
    text-decoration: underline;
}

Extend the underline using the tailwind.config.js config file:

module.exports = {
    theme: {
        extend: {}
    },
    variants: {},
    plugins: [
        function ({addUtilities}) {
            const extendUnderline = {
                '.underline': {
                    'textDecoration': 'underline',
                    'text-decoration-color': 'red',
                },
            }
            addUtilities(extendUnderline)
        }
    ]
}

How to change underline color error textinputlayout android

Just use the app:boxStrokeErrorColor attribute:

    <com.google.android.material.textfield.TextInputLayout
        app:boxStrokeErrorColor="@color/primaryLightColor"
        ...>

Sample Image

It requires Material Components lirabry version 1.2.0.

How to change the underline color of the input component in MD Bootstrap

Set backgroundImage style with <input /> would work

Try it in-text:

const style = {  backgroundImage: `linear-gradient(0deg, black 2px, rgba(0, 150, 136, 0) 0),    linear-gradient(0deg, rgba(0, 0, 0, 0.26) 1px, transparent 0)`};const App = () => {  return (    <div className="App">      <div class="input-group input-group-lg">        <div class="input-group-prepend">          <span class="input-group-text" id="inputGroup-sizing-lg">            Large          </span>        </div>        <input          type="text"          class="form-control"          aria-label="Large"          style={style}          aria-describedby="inputGroup-sizing-sm"        />      </div>    </div>  );};ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><link  rel="stylesheet"  href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"  integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX"  crossorigin="anonymous"/>

is there any way to make Text and Underline different colors in Flutter?

You can use decorationColor: yourColor inside your Text attribute to change the underline's color. For example, if you want to underline all of your text:

Text("Your text",
      style: TextStyle(
             color: Colors.white
             decoration: TextDecoration.underline,
             decorationColor: Colors.yellow,
          ))

In case you want to underline only a part of text you have to use RichText with TextSpan. For example:

RichText(
   text: TextSpan(
   children: [
         TextSpan(
             text: "NOT UNDERLINED TEXT",
             style: TextStyle(
             color: Colors.white)
         ),
         TextSpan(
             text: "UNDERLINED TEXT",
             style: TextStyle(
             color: Colors.white
             decoration: TextDecoration.underline,
             decorationThickness: 2,
             decorationStyle: TextDecorationStyle.wavy))
              ], 
     style: TextStyle(color: Colors.yellow)
  ))