Safari select / dropdown options are not aligned to input tag

user_6331353 0
Viewed 1109

This is my dropdown. In safari the dropdown content does not align to the edges of the clickable select. The right and left side of the box containing the options should be aligned to the right and left side of the select. safari is the only browser this happens in.

This is what the dropdown and options look like in the safari browser

enter image description here

Right now, the dropdown options and dropdown are not aligned and look like

enter image description here

but I want them to be aligned/flush, which would look like

enter image description here

This is the current code which creates the dropdown

select {
    padding: .375rem .75rem;
    background-color: #fff;
    width: 50%;
    border-radius: 1rem!important;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 0px 1px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);
    background-size: 0.65em, 100%;
    background-repeat: no-repeat, repeat;
    background-position: right 0.7em top 50%, 0px 0px;
}

select:active, select:focus {
  outline: none;
}
<div>
<select >
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>
</div>

safari select css html
3 Answers

My attempt: I wrapped the select in a container with the rounded border and I moved the nested select to the right. Then I adjusted the left padding of the select so to have the first option aligned as in your example

I also used @supports to apply this new style on webkit-only browsers.

 .select-wrapper {      
   position: relative;
   border: 1px currentColor solid;      
   border-radius: 1rem;
   width: 50%;
   overflow-x: hidden;
   cursor: pointer;
   box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 0px 1px;
}

.select-wrapper select {
   border: 0;
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   box-sizing: border-box;
}

.select-wrapper select:active, 
.select-wrapper select:focus {
   outline: none;
}

/* Webkit only style */

@supports (-webkit-font-smoothing: auto) {

 .select-wrapper::after {
   content: "";
   position: absolute;
   z-index: 1;
   top: calc(50% - 5px);
   right: .5rem;
   width: 10px;
   height: 10px;
   pointer-events: none;
   background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);
   background-size: 100%, 100%;
   background-repeat: no-repeat, repeat;
   background-position: center, 0px 0px;
 }
  
 .select-wrapper select {
   padding: .375rem 0;
   width: calc(100% - 4px);
   transform: translateX(13px); /* adjust as you prefer */
 }
}


/* Non-Webkit style */

@supports (not (-webkit-font-smoothing: auto)) {
   
  .select-wrapper select {
   padding: .375rem .75rem;
   background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);
   background-size: 0.85em, 100%;
   background-repeat: no-repeat, repeat;
   background-position: right 0.7em top 50%, 0px 0px;
  }
}
<div class="select-wrapper">
  <select >
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
</div>

user_10988510

I have tested it. I think it's right now!

.h {      
   position: absolute;
   border: 1px white solid;      
   border-radius: 1rem;
   width: 50%;
   cursor: pointer;
   box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 0px 1px;
}

.h select {
   border: 0;
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
}

@supports (-webkit-font-smoothing: auto) {

   .h::after {
       position: absolute;
       z-index: 2;
       top: calc(45% - 5px);
       right: .5rem;
       width: 10px;
       height: 10px;
   }

   .h select {
      padding: .375rem 0;
      width: calc(100% - 4px);
      transform: translateX(15px); 
   }
 
}
    
select:active, select:focus {
      outline: none;
}
<div class="h">
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
    </select>
</div>

user_142280760
user_143578690
Related