javascript - how can css for select on Safari same Chrome - Stack Overflow

admin管理员组

文章数量:1401592

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>

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

• javascript
• html
• css

Share Improve this question Follow asked Dec 31, 2018 at 2:09 Hong Van VitHong Van Vit 2,99633 gold badges2121 silver badges4545 bronze badges 3

• Is the question how you can style a select field? – René Höhle Commented Dec 31, 2018 at 2:13
• You have a display in all browser, so what the problem ? – Mister Jojo Commented Dec 31, 2018 at 2:22
• You can see, the imager down on the Chrome is not same on the Safari. – Hong Van Vit Commented Dec 31, 2018 at 2:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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>

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

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 */
}

本文标签： javascripthow can css for select on Safari same ChromeStack Overflow