Need CSS for the below html to create border, sample image attached

Maria Soares 0
Viewed 20

I want to have a border size for the below html code but I am unable to do so and have tried with its attribute's. pls if I can have the css for it. css required for this image

<div class="navbar1">
  <div class="select-div">
        <select name="country" class="form-control" id="country">
          <option value="USA" label="United States">United States</option>
          <option value="CN" label="Canada">Canada</option>
        </select>
        <select name="language" class="form-control" id="language">
        <option value="USA" label="English">English</option>
        <option value="Mexico" label="Spanish">Spanish</option>
      </select>
      <select name="search" class="form-control" id="search">
        <option value="search" label="Search">Search</option>
    </select>
</div>
</div>

I tried writing CSS using the class,label,id attributes but I am unable to design it the way it's in the image attached

margins border css html
1 Answers

If i understand you correctly, you want to make select option like in the image. if that's the case, Kindly check some changes below - if that helps. I have added the icon using pseudo element ::after

select{
        padding: 5px 30px 5px 5px;
        appearance: none;
        width: 150px;
        border: 1px solid #bebebe;
    }
    .select,
    .select-dark{
        position: relative;
    }
    .select::after {
        content: '\25BC';
        position: absolute;
        top: 5px;
        right: 10px;
        color: #6BBDD7;
        cursor:pointer;
        pointer-events:none;
        transition:.25s all ease;
    }
    .select-dark::after {
        content: '\25BC';
        position: absolute;
        top: 0;
        right: 0;
        background-color: #117CC0;
        color: #fff;
        cursor: pointer;
        pointer-events: none;
        transition: .25s all ease;
        padding: 6px 6px 3px
    }
<div class="select-div" style="display: flex;gap:20px">
        <div class="select">
            <select name="country" class="form-control" id="country">
              <option value="USA" label="United States">United States</option>
              <option value="CN" label="Canada">Canada</option>
            </select>
        </div>
        <div class="select">
            <select name="language" class="form-control" id="language">
                <option value="USA" label="English">English</option>
                <option value="Mexico" label="Spanish">Spanish</option>
            </select>
        </div>
        <div class="select-dark">
            <select name="search" class="form-control" id="search">
              <option value="search" label="Search">Search</option>
          </select>
        </div>
  </div>

Rohit K.0
Related