CODEWITHSUNDEEP
css
LukzzXB
LukzzXB

Reputation: 57

CSS Search Box Expanding

https://codepen.io/LukzzXB/pen/yrMjxg

So i am coding a text box using CSS. If you see the link above you'll see that when i hover over the button the 'Type to search' works fine as it goes to the right.

Now i'm just trying to get the background of the button to go with the text box aswell.

So the goal here is to try get the box to expand right and only right. 

<html>
  <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">
  </script>`enter code here`
  </head>
  <head>
    <title>Using CCS for the first time</title>
  </head>  
  <head>
  <style>
    h1 {

    color: orange;
    text-align: left;

    }

    </style>
    </head>
      <body>
    <h1>
      <span style="font-family:Arial">Hello and welcome to a search box</span>
    </h1>
      </body>  

<head>
<body>
<div class="search-box">

  <input class="search-txt" type="text" name="" placeholder="Type to search">
  <a class="search-btn" href="#">
  <i class="fas fa-search"></i>
  </a>
</div>  
</head>

    </body>
</html>
body {
    margin: 0;
    padding: 0;
    background: red;
   }

.search-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2f3640;
    height: 40px;
    border-radius: 40px;
    padding: 10px;
   }

   .search-box:hover > .search-txt{

       width: 240px;
       padding: 0 6px;
   }

   .search-box:hover > .search-btn{
    background: white;

}

   .search-btn{
    float: left;
    color: red;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4;   
   }

   .search-txt{
    position: absolute;
    float: right;
    border: none;
    background: none;
    outline: none;
    padding: 0;
    color: white;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;
   }

Upvotes: 0

Views: 923

Answers (1)

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

Something like this?

https://codepen.io/anon/pen/eovbjW

You should only have one HEAD and one BODY tag on the page.

It was the float + display:flex that messed things up for you. I rarely use float myself nowadays, to be honest.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="styles.css">

    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

    <title>Using CCS for the first time</title>
  </head>

  <body>
    <h1>Hello and welcome to a search box</h1>

    <div class="search-box">
      <div class="fas fa-search"></div>

      <input class="search-txt" type="text" placeholder="Type to search" />
    </div>  

  </body>
</html>

CSS
[edit] If you're not familiar with CSS variables, I used them here, in .search-text as a guideline of how to use them. In the left attribute in .search-text, I even used calc() to add two CSS variables together.

:root {
  --background-black: #2f3640;
  --background-red: red;

  --search-box-padding: 10px;
  --search-box-size: 40px;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--background-red);
}

h1 {
  color: orange;
  font-family: Arial;
  margin-left: 1rem;
}

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  height: var(--search-box-size);
  width: var(--search-box-size);
  background-color: var(--background-black);
  border-radius: 50%;
  padding: var(--search-box-padding);
  cursor: pointer;
}

.search-box > .fa-search {
  padding: var(--search-box-padding);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  color: var(--background-red);
}

.search-box:hover > .fa-search {
  background: white;  
}

.search-txt {
  position: absolute;
  top: var(--search-box-padding);
  left: calc(var(--search-box-size) + var(--search-box-padding));
  border: none;
  outline: none;
  padding: 0;
  height: var(--search-box-size);
  width: 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  background-color: var(--background-black);
  color: white;
  font-size: 16px;
  transition: 0.4s width, 0.4s padding;
}

.search-box:hover > .search-txt{
  width: 240px;
  padding: 0 0.75rem;
}

Upvotes: 2

Related Questions