Weird css behavior for select statement laravel 8

The following code is intended to remove the caret/arrow from a select option list. But the app.css is preventing this somehow.... There is a ton of code in that file... And im new to web development. Could someone help me zero in on what could be overwriting my code. The browser source looks fine. But is there some other layer of rendering that im not catching?


<select style="width:70px;-moz-appearance: none !important;-webkit-appearance: none !important;" >
  <option>2000</option>
  <option selected="selected">2001</option>
  <option>2002</option>
</select>

How is it possible that my inline style with importance is being ignored? if you put this code in welcome blade it works. if you put this code in layouts.app blade it fails because of app.css.

Tray2

5 years ago

Level 73

What browser are you using?

miket3

5 years ago

Level 1

Its not a browser problem. Im using chrome. I have isolated the problem to Mix(css/app.css);

But with laravel that file could be anywhere and everywhere.

I believe its a tailwind issue. My inspection window shows that the class is modified and my webkit setting is removed. So tailwind has a design flaw and is ignoring my !important.

Im guessing there is a parser or some js that im not aware of.

But i dont know which instance of app.css, to look in...

miket3

5 years ago

Level 1

So far i modified the obvious one. No luck... I guess i gotta try and track down tailwind base, components, and the other one.

chaudigv

5 years ago

Level 16

Give this a try

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

For more info How to remove the default arrow icon from a dropdown list (select element)?

miket3

5 years ago

Level 1

Thanks but thats aleady an inline declaration.

miket3

5 years ago

Level 1

I could not pinpoint the exact line in the css/app.css file that was being used to override my !important declaration.

It surely is a bug because nothing should take precedence over an inline !important tag.

I renamed every SELECT reference in the file.

Now I can move forward.