Change selection color for text field-CodePudding

I have two text fields inside of a form. When either input field is selected the outline for that field turns white. I need to change this color. How can I achieve this?

input[type=text], input[type=password] {
    width: 65%;
    padding: 12px 20px;
    padding-top: 10px;
    margin: 4px 85px;
    display: inline-block;
    border: 1px solid rgba(115, 82, 122, 0.486);
    box-sizing: border-box;
    background-color: rgb(33, 33, 34);
    color:rgba(175, 149, 35, 0.836);
    font-size: 18px;
    /* border-color: rgb(63, 15, 15); */
}

CodePudding user response：

In the solution below, when the focus event of the <input> elements occurs, the border style is assigned a value and the border color of the <input> element is changed.

body {
  background-color: black;
}
input[type=text], input[type=password] {
    width: 65%;
    padding: 12px 20px;
    padding-top: 10px;
    margin: 4px 85px;
    display: inline-block;
    border: 1px solid rgba(115, 82, 122, 0.486);
    box-sizing: border-box;
    background-color: rgb(33, 33, 34);
    color:rgba(175, 149, 35, 0.836);
    font-size: 18px;
}
input[type=text]:focus, input[type=password]:focus {
  outline: none !important;
  border: 1px solid red;
}

<body>
  <form>
    <input type="text">
    <input type="password">
  </form>
</body>

CodePudding user response：

Your version is still right. you can use with a class

body {
    background-color: #2a2f3f;
}
.text-control {
    display: block;
    width: 30%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    outline: none;
    line-height: 1.5;
    color: #0c3d13;
    background-color: #538976;
    background-clip: padding-box;
    border: 2px solid yellow;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.text-control:hover {
    border: 2px solid green;
    background-color: red;
}
.text-control:focus {
    border: 2px solid #00ba4a;
    background-color: #1c6b3c;
}

<form>
    <input  type="text" name="">
</form>