Html Question posted in
Some basic documentation can be found here.

Html – Transition, border-color and :focus not working on input element

I am creating a Google-like search box for an e-commerce site. However, the border-color, transition and:focus properties are not working. I will specify the problem in 3 parts-

border-color: The hex color which I specified is replicated only in the bottom half of the input box, the upper half uses the default color

:focus: I want the input box to turn a shade of green, but it just turns its default color

transition: I wanted a 1s delay when it changes its color on focus, but no delay happens

I tried adding !important to all properties just in case they conflicted with Bootstrap (I am using Bootstrap, mostly for its grid system). Yet, it still didn’t work. Here’s the code-

 input {
  border-radius: 3rem;
  height: 5rem;
  border-color: #999999;
  font-family: "Poppins";
  font-size: 1.5rem;
  transition: border-color 1s;
}

input[type=text]:focus {
  border-color: #85de46;
 }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
</head>

<body>
  <div class="container-fluid no-gutters">
    <div class="row d-flex min-vh-100 align-items-center justify-content-center">
      <input class="col-sm-10 col-md-5" placeholder="Example text">
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>
Tags:

2

Answers


  1. 0 
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
</head>

<body>
  <div class="container-fluid">
    <div class="row d-flex min-vh-100 align-items-center justify-content-center">
      <input type="text" class="col-sm-10 col-md-5" placeholder="Example text">
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>

    Style like:

    input {
      border-radius: 3rem;
      height: 5rem;
      border: 2px solid #999999; /* Specify border width and style */
      font-family: "Poppins", sans-serif; /* Add fallback font */
      font-size: 1.5rem;
      transition: border-color 1s;
    }

    input[type=text]:focus {
      border-color: #85de46;
      outline: none; /* Remove default outline for better focus effect */
    }
    Login or Signup to reply.
  2. 0

    Taking each of the 3 problems in turn:

    border-color: The hex color which I specified is replicated only in
    the bottom half of the input box, the upper half uses the default
    color

    Remove any outline and set all the border settings yourself, e.g. using the over-arching border property.

    :focus: I want the input box to turn a shade of green, but it just
    turns its default color

    I can’t see any setting for this in the given code. The snippet below sets the background-color to lime on focus as a demonstration.

    Note that the given input element had no type attribute explicitly so the focus setting was not picked up.

    transition: I wanted a 1s delay when it changes its color on focus,
    but no delay happens

    To get a delay, as opposed to a gradual transition, the second time in the transition property values will have to be set.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
  <style>
    input {
      border-radius: 3rem;
      height: 5rem;
      font-family: "Poppins";
      font-size: 1.5rem;
      transition: border-color 0s 10s;
      border: solid 10px #999999;
      outline: none;
    }
    
    input[type=text]:focus {
      border: solid 10px #85de46;
      background-color: lime;
    }
  </style>
</head>

<body>
  <div class="container-fluid no-gutters">
    <div class="row d-flex min-vh-100 align-items-center justify-content-center">
      <input class="col-sm-10 col-md-5" type="text" placeholder="Example text">
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>

</html>

    Note: to make the changes obvious just for this test, the snippet has border width of 10px and the delay before the border color is changed as 10s. Obviously change these to what you require.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search