how can css for select on Safari same Chrome

Question

I have a select like this:

<select id="sbInBreak2_hh" name="sbInBreak2_hh">
 <option value="0">00</option>
 <option value="1">01</option>
 <option value="2">02</option>
 <option value="3">03</option>
 <option value="4">04</option>
 <option value="5">05</option>
 <option value="6">06</option>
 <option value="7">07</option>
 <option value="8">08</option>
 <option value="9">09</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option>
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
 <option value="16">16</option>
 <option value="17">17</option>
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 <option value="21">21</option>
 <option value="22">22</option>
 <option value="23">23</option>
</select>

On the Chrome it is Ok, the PM required me display on the Safari and IE same on the Chrome? How can css for it?

On Chrome

On Safari and IE

You can see, the imager down on the Chrome is not same on the Safari. — Hong Van Vit, Dec 31 '18 at 02:38

score 2 · Answer 1 · answered Dec 31 '18 at 02:20

2

You need to apply -webkit-appearance:none; and using background-image for select.

answered Dec 31 '18 at 02:20

Hoàngg

75
2

có nhiều cách mà bạn. Bạn có thể làm 1 cái border arrow hoặc tìm 1 cái image arrow giống thế kia cũng được. – Hoàngg Dec 31 '18 at 02:47

score 2 · Accepted Answer · answered Jan 02 '19 at 03:00

Try like this.

select::-ms-expand { display: none; }
select {
    box-shadow:none;   
    outline:none;      
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position-x: 21px;
    background-position-y: 0px;
    border: 1px solid #dfdfdf;
    padding: 5px;
    width: 44px;
}
/*select::-ms-expand { display: none; }*/

<select id="sbInBreak2_hh" name="sbInBreak2_hh" style="width:44px;">
 <option value="0">00</option>
 <option value="1">01</option>
 <option value="2">02</option>
 <option value="3">03</option>
 <option value="4">04</option>
 <option value="5">05</option>
 <option value="6">06</option>
 <option value="7">07</option>
 <option value="8">08</option>
 <option value="9">09</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option>
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
 <option value="16">16</option>
 <option value="17">17</option>
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 <option value="21">21</option>
 <option value="22">22</option>
 <option value="23">23</option>
</select>

score 1 · Answer 3 · answered Dec 31 '18 at 02:23

1

If I understand your question correctly, then you can add the following CSS to prevent the "highlighted" effect on IE and Safari:

#sbInBreak2_hh,
#sbInBreak2_hh:focus {
    box-shadow:none;   /* Prevent blurred border */
    outline:none;      /* Prevent hard outline */
}

answered Dec 31 '18 at 02:23

Dacre Denny

29,664
5
45
65

Thank you, how can display button inner fill black same chrome? – Hong Van Vit Dec 31 '18 at 02:35
You're welcome - sorry not sure what you mean by inner fill? Do you mean change the white background to black background? – Dacre Denny Dec 31 '18 at 02:36
I mean: triangular on Chrome is difference vs Safari – Hong Van Vit Dec 31 '18 at 03:16
@HongVanVit have a look at this https://stackoverflow.com/questions/14218307/select-arrow-style-change – Dacre Denny Dec 31 '18 at 03:18

how can css for select on Safari same Chrome

3 Answers3