select option menu at right and with larger width

Question

I want a layout like this:

For that Im using the code below. But the select menu option at the top right is not working corretly. This select option is not aligned at the right and the select element is very small. I have here the example https://jsfiddle.net/uhnz45nm/, with some backgrounds to be more clear.

Do you know where is the issue? How to put this select option menu at right with a certain width with the text at left and the icon font at right in the select elelment?

Html:

    <div class="container background-light m_top m_bottom">
      <div class="test div">
        <div class="menu">
          <ul class="menu-items">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
          </ul>

            <div class="menu-select">
              <span>Order by</span>
              <i class="fa fa-caret-down" aria-hidden="true"></i>
              <form>
              <select>
                <option selected>Item 1</option>
              </select>
               </form>
            </div>

    </div>
    <div class="side">sidebar</div>
    <div class="main">main</div>
  </div>
</div>

css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  outline: 0;
  border-radius: 0;
}

ul{
  list-style:none;
}

/*.test{display:flex;}*/


input,
select,
textarea,
button {
  padding: 15px;
  width: 100%;
}

select,
input,
button {
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.container {
  float: left;
  width: 100%;
}

.div {
  width: 92%;
  margin: 0px auto;
}


.menu{
    display: flex;
  align-items:center;
  justify-content:space-between;
  background-color: yellow; 
}
.menu-items{
  display: flex;
  align-items:center;
  flex-basis:40%;
}
.menu-select{
    display: flex;
  align-items:center;
  background-color: red;
    flex-basis:60%;
}

.menu-select select{
  border:1px solid gray;
}

.menu-items li{
  margin-right: 15px;
}

.menu-items a{
  padding: 10px;
}

.div-content{
  display:flex;
}

score 0 · Accepted Answer · answered Jul 30 '17 at 20:33

Sadly you can't add the icon to the select option as described in this answer.

If you want to style the select boy without the icon, you can use the following css:

.menu-select{
  display: flex;
  align-items:center;
  background-color: red;
  flex-basis:60%;
  align-items: center;
  justify-content: center;
}

#item-select {
  margin: 10px;
  width: 150%;
}

This will center the Select menu and the text in the container and with the attribute width in #item-select you can set the width of your select to a value you like. Here is the full working example.

select option menu at right and with larger width

1 Answers1