Question 343009 in CSS Question posted in
Some basic documentation can be found here.

Css – :focus doesn't do anything on my form inputs

Below is my code. When I select the input, it has the default black border instead of the color I picked below. I changed :focus to :hover, and I do get my desired border when I hover over the input. Any ideas?

input {
    width: 250px;
    height: 35px;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 18px;
    border: 1px solid lightgray;
}

input:focus {
    border: 2px solid rgb(255, 145, 0);
}
<input />
Tags:

2

Answers


  1. 0

    The issue might be related to the default styling applied by the browser

    input {
    width: 250px;
    height: 35px;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 18px;
    border: 1px solid lightgray;
    outline: none; /* Remove the default focus outline */
}

input:focus {
    border: 2px solid rgb(255, 145, 0);
    outline: 2px solid transparent; /* Add custom focus outline */
}
    Login or Signup to reply.
  2. 0

    The outline is hiding your border.

    When you put it to outline:none you have your orange border. 😊

    input {
    width: 250px;
    height: 35px;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 18px;
    border: 1px solid lightgray;
}

input:focus {
    outline:none;
    border: 2px solid rgb(255, 145, 0);
}
    <input>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search