how can css for select on Safari same Chrome

select option css not working in safari
css style select option dropdown
ios select box styling
webkit-appearance
custom select dropdown css only
css select option background color chrome
css for mozilla firefox and chrome
select option font-family

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>
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>

Better Looking Select Elements that Look the Same in All Browsers , So what can we do about it? CSS, thank Zeus! Here's the bare minimum you'll need, and this will give you support for Chrome, Firefox, Safari and  CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge A set of useful CSS3 media queries to target only specific versions of the various browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Edge

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

Dropdown Default Styling, WebKit browsers (Safari, Chrome) will ignore you. Firefox, Opera, and This behavior is similar they handle search inputs. Firefox, Opera When you select an option it displays the custom styling again with the choice shown. It's a lot of work  How to set border radius in Popular Browsers like Mozilla, Chrome, Safari, Opera. The CSS3 border-radius property allows web developers to easily utilize rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

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

Topic: Dropdown menu styling in Safari?, I was wondering if there was any way to change the way Safari is displaying my drop down The menu displays perfectly fine in both Firefox and Chrome. This will give you more option to style your dropdown, and make it look the same on  So what can we do about it? CSS, thank Zeus! Here’s the bare minimum you’ll need, and this will give you support for Chrome, Firefox, Safari and IE 10, 11 & Edge (IE9 support outlined below, along with iOS support). Firstly, all select elements need to be wrapped in a containing element.

appearance (-moz-appearance, -webkit-appearance), The -moz-appearance CSS property is used in Gecko (Firefox) to The -webkit-​appearance property is used by WebKit-based (e.g., Safari) and Blink-based (e.g.​, Chrome, Opera) browsers to achieve the same Firefox Chrome Safari Edge, The element is drawn like a button. toolbarbutton-dropdown. Select arrow style change. Ask Question Asked 7 years, 5 months ago. how can css for select on Safari same Chrome. See more linked questions. Related. 5219.

Handling common HTML and CSS problems, CSS has a similar story — you need to check that your property names are If you view the example on a supporting browser like desktop/Android Chrome or iOS Safari, Look for a feature you can use to select that element. CSS, Safari: Target only Safari browser. GitHub Gist: instantly share code, notes, and snippets.

Styling a Select Like It's 2019, As it turns out, a reasonable set of styles can create a consistent and attractive select Below is that same select element styled directly with some CSS. Chrome; Safari; Edge; Internet Explorer 11; Internet Explorer 10 CSS <select> class doesn't work in Safari. HTML & CSS. Contrid. August 30, I also don’t have a Mac, and I don’t have a browser that uses the same rendering engine as Safari, otherwise I

Comments
  • Is the question how you can style a select field?
  • You have a display in all browser, so what the problem ?
  • You can see, the imager down on the Chrome is not same on the Safari.
  • 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.
  • Thank you, how can display button inner fill black same chrome?
  • You're welcome - sorry not sure what you mean by inner fill? Do you mean change the white background to black background?
  • I mean: triangular on Chrome is difference vs Safari
  • @HongVanVit have a look at this stackoverflow.com/questions/14218307/select-arrow-style-change