change the color of a text input border

[coreyCLI]

I want to be able to change the color of a text input border when you focus on the input box.  I want to change the blue border to red when the field is empty.  I have the javascript logic but not the css that would change the blue border. 

Here is the css I have so far but all it does is put a border around the whole input panel, not just the text box.

.required button{
    border: 2px solid #f6685e !important;
}

[ITWhisperer]

Assuming you have given your text input field an id of "required"

          #required .splunk-textinput {
            border: 2px solid #f6685e !important;
          }

[marnall]

Are you able to use the ID of the div containing the text input to apply the border style?

E.g. my test input has id=input1_11212 , so using:

#input1_11212 {
    border: 2px solid #f6685e !important;
}

Results in a red border:

[coreyCLI]

I am using Splunk version 9.3.1 and I get the same results using your example.  A red border around the entire panel and not just the text box itself.

[marnall]

My test machine is also on Splunk version 9.3.1.

Could you post sanitized snippets of your JS or dashboard source code? It's hard to see where the issue lies without seeing the full picture.

[coreyCLI]

Here is the JS.  I gave the input id="user_name".

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function (mvc) {

    // get default token model
    var tokens = mvc.Components.getInstance("default");
    var user_name = document.getElementById("user_name");

    // Set required style if init value is undefined to channel
    if (tokens.get("user_name") === 'Enter a User') {
        user_name.classList.add("required");
    }


    // Dropdown change on channel 
    tokens.on("change:user_name", function (model, value) {
        if (value === 'Enter a User') {
            user_name.classList.add("required");
        } else {
            user_name.classList.remove("required");
        }
    });

});

Here is the CSS again just to capture it all in the same reply.

.required button{
    border: 2px solid #f6685e !important;
}

I use this code (more or less) on other dashboards to perform the same "required" function on other inputs like drop downs and it works by creating a red outline around the drop down until a choice is made.