How do I change the text input underline that comes up when clicked on in css-CodePudding

Whenever I click on a text input in a form, a green underline comes up which doesnt really go along with the primary colours of the website I am currently working on. How do i change it to purple from green?( > Image for reference since I can't include images in my posts yet ) https://i.stack.imgur.com/vEBk7.jpg

CodePudding user response：

Here is the main idea, according to my knowledge we have 3 states for input,
active,focus,hover.
when you are selecting it's on the active mode, while you are selecting it by pressing tabs key it's in the focus mode and when you mouseover it it's in the hover mode.
So to modify t's styling in this three mode, I have shown in example with input:focus,input:hover and input:active selectors and than apply CSS. You can play with it and apply same scenario in your question.

I have also added all three modes for better understanding.

.main {
  display: flex;
  align-items: center;
  justify-content: cenetr;
  flex-direction: column;
  height: 100vh;
}

.allstate>input,
span input {
  border: none;
  border-bottom: 1px solid #c5c5c5;
}

.allstate>input:hover,
.allstate>input:focus,
.allstate>input:active {
  outline: none;
  border-bottom: 1px solid purple;
}

.modes {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modes span input {
  display: block;
  width: 100%;
}

.active input:active,
.hover input:hover,
.focus input:focus {
  outline: none;
  border-bottom: 1px solid purple;
}

<div >
  <span >All states: <input type="text" value="" placeholder="Enter some data" /></span>
  <div >
    <span >only active state: <input type="text" value="" placeholder="Enter some data" /></span>
    <span >only hover(mouse over) state: <input type="text"  value="" placeholder="Enter some data" /></span>
    <span >only focus state: <input type="text" value="" placeholder="Enter some data" />(outline won't appear as it's focus only)</span>
  </div>
</div>