How to hide black input underline in radixui component in tailwindCSS

Question

I have a select component from radix/ui and I have realized when focused a round black ring appears. I have tried to hide it using focus:appearance-none focus:outline focus:outline-none focus:ring-0 in tailwindCSS and none of this work. For illustration the issue is visible in their main website on the select component.

How can I remove that black outline

Answer 1

It looks like they are styling their button with a box-shadow property when it's focused.

Try focus:shadow-none

Answer 2

The black outline on focus is coming from this inbuilt property

.SelectTrigger:focus {
  box-shadow: 0 0 0 2px black;
}

You can either remove this or override this by making box-shadow:none. However, this issue is common in TailwindCSS and is generally tackled by using focus:outline-none.

<script src="https://cdn.tailwindcss.com"></script>

<!-- Select with Outline Enable on Focus -->
<div class="bg-gradient-to-tr from-blue-600 to-purple-600 p-24">
  <label class="m-2 text-white">Select with Outline Enable on Focus : </label>
  <select class="rounded-md bg-blue-200 p-2" name="Cars" id="Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Jaguaar</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

<!-- Select with Outline Disable on Focus  -->
<div class="bg-gradient-to-bl from-blue-600 to-purple-600 p-24">
  <label class="m-2 text-white">Select with Outline Disable on Focus : </label>
  <select class="rounded-md bg-blue-200 p-2 focus:outline-none" name="Cars" id="Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Jaguaar</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

Also you can view here