CSS Change Shape after hover and clicked-CodePudding

Recently I was trying to style an input box using CSS. Where when the box hovered, it'll change it width and when it clicked it shape will stay. Meanwhile, if it not clicked and got hovered away it'll back to it's normal width. But the result is not like what I wanted.

Here is the example.

body {
  background-color: black;
}

p,
form {
  opacity: 100%;
  font-family: Mosk-Regular;
  font-size: 20px;
  text-align: center;
  color: white;
}

input[type=text] {
  border: 10px solid white;
  border-radius: 20px;
  width: 130px;
}

input[type=text]:hover {
  width: 180px;
  transition: all 1s;
}

input[type=submit] {
  font-family: Mosk-Bold;
  font-size: 15px;
  background-color: white;
  border: 2px solid white;
  border-radius: 10px;
}

<form>
  <label for="fName">First Name</label>
  <br>
  <input type="text" id="fName" name="fName">
  <br><br>
  <label for="lName">Last Name</label>
  <br>
  <input type="text" id="lName" name="lName">
  <br><br>
  <input type="submit" name="submit" value="submit">
</form>

I haven't tried the clicked one because I need to learn more JS. But for the hovered away, i don't have any idea how to do it. I have tried the input[type=text]:hover:after and input[type=text]:hover:before but nothing happend. It makes the input has no animation instead giving it a hovered away animation.

CodePudding user response：

You need to add the transition properties to the default input selector too. It essentially acts as the "unhovered" state. You can also force the wider width while the input has focus with a :focus selector.

body {
  background-color: black;
}

p,
form {
  opacity: 100%;
  font-family: Mosk-Regular;
  font-size: 20px;
  text-align: center;
  color: white;
}

input[type=text] {
  border: 10px solid white;
  border-radius: 20px;
  width: 130px;
  transition: all 1s;
}

input[type=text]:hover {
  width: 180px;
  transition: all 1s;
}

input[type=text]:focus {
  width: 180px;
  transition: all 1s;
}

input[type=submit] {
  font-family: Mosk-Bold;
  font-size: 15px;
  background-color: white;
  border: 2px solid white;
  border-radius: 10px;
}

<form>
  <label for="fName">First Name</label>
  <br>
  <input type="text" id="fName" name="fName">
  <br><br>
  <label for="lName">Last Name</label>
  <br>
  <input type="text" id="lName" name="lName">
  <br><br>
  <input type="submit" name="submit" value="submit">
</form>