Issue
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); */
}
Solution
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>Answered By - Sercan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.