1

I am making a nav bar in which there is a search box having three things

  1. category select (like - all, football, sports ,etc.)

  2. Search input ( where the user will enter the name of the product)

  3. search button

see below:- image of nav

I know it is ugly cuz styling is left

But there is a problem and that is the right space in select (I call it padding cuz I don't know it's name {I know it is not padding but still for my understaing } )

this marked in red circle

enter image description here

I need to remove that thing and make select element width to increase or decrease according to the option selected by user . Like the search nav bar of amzon

enter image description here

after I select a option there it resizes

enter image description here

Is there any property in css or something else please help me

Here's are my code

HTML :-

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  height: 100vh;
  width: 100%;
  background: deepskyblue;
  position: relative;
}
header nav {
  height: 10vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
}
header nav .nav-title {
  position: absolute;
  top: 0;
  left: 3%;
  height: 100%;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
}
header nav .nav-title h3 {
  color: white;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.2em;
}
header nav .nav-search-box {
  position: absolute;
  width: 60%;
  height: 100%;
  /* background: red; */
  left: 23%;
  top: 0;
}
header nav .nav-search-box form {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
header nav .nav-search-box form select,
input,
button {
  height: 50%;
  width: auto;
}
header nav .nav-search-box form select {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  display: block;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="css/style.css?v=<?php echo time(); ?>" />
    <title>flipmart</title>
  </head>
  <body>
    <header id="header">
      <nav>
        <div class="nav-title">
          <h3>FashMart</h3>
        </div>
        <div class="nav-search-box">
          <form action="products.php" method="GET">
            <select name="cat">
              <option value="all">All</option>
              <option value="all">Jeans</option>
              <option value="all">T-shirts</option>
              <option value="all">Shirts</option>
              <option value="all">a long text ********</option>
            </select>
            <input type="text" class="search-box" name="pname" />
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
        </div>
        <div class="nav-itmes">
          <!-- If user is not signed in  -->
          <!-- <a href="login.php" class="li">login</a>
          <a href="register.php" class="sp">signup</a> -->
        </div>
      </nav>
    </header>
  </body>
</html>
j08691
  • 204,283
  • 31
  • 260
  • 272
Harish Kumawat
  • 13
  • 3
  • Check this for variable width: https://stackoverflow.com/questions/28308103/adjust-width-of-select-element-according-to-selected-options-width. – prettyInPink Apr 19 '21 at 12:23
  • Amazon is not resizing the select, what you see is an span, the resizes automaticaly with its text. When checking the html code on amazon you can see, that the select is much widther. You could do something similar. – Jarlik Stepsto Apr 19 '21 at 14:16

0 Answers0