html tag wont visible same in chrome and safari Asked Jul 05 '21 at 14:47 Active Jul 08 '21 at 07:34 Viewed 1,036 times 1 I am building a react application and using a select tag for multiple data selection However the select tag works fine but there is a problem in the appearance in this tag Appearance in chrome Appearance in safari In this link it says that tag in supportive in both browsers. Is there is any way to fix it html css reactjs tailwind-css edited Jul 07 '21 at 13:04 Usama Abdul Razzaq asked Jul 05 '21 at 14:47 Usama Abdul Razzaq 643 2 10 19 1 Please provide debugging details in form of a [repro]. – tacoshy Jul 05 '21 at 14:52 Potential dup: https://stackoverflow.com/questions/7638677/how-can-i-remove-the-gloss-on-a-select-element-in-safari-on-mac – Squiggs. Jul 05 '21 at 14:52 Does this answer your question? [How do I style a dropdown with only CSS?](https://stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css) – Osama Bin Saleem Jul 05 '21 at 14:52

Answer 1

You can use appearance-none which is a class in tailwindCSS that removes any browser specific styling.

Resource: https://tailwindcss.com/docs/appearance

Answer 2

Yeah, to be honest most browsers have their default styles to fall back on. If you want something consistent I often use CSS, try the following and play around:

CSS:

/* Reset Select */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;

  background: white;
  border:1px solid #e7e7e7;
  background-image: none;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select */
.select {
  margin:1rem;
  position: relative;
  display: flex;
  width: 20em;
  height: 3em;
  line-height: 3;
  background: #2c3e50;
  overflow: hidden;
  border-radius: .25em;
}
select {
  flex: 1;
  padding: 0 .5em;
  color: #ccc;
  cursor: pointer;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1em;
  background: #ccc;
  cursor: pointer;
  pointer-events: none;
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}
/* Transition */
.select:hover::after {
  color: #ffffff;
}

html:

<div class="select">
  <select name="slct" id="slct">
    <option selected disabled>Choose an option</option>
    <option value="1">CSS</option>
    <option value="2">JS</option>
  </select>
</div>