Cannot style select input

[anwarenrique]

Hi, my objective is to have this entire select input to have the border be rounded-full, but I cannot get it to work. As you can see in the image, the gray border persists being rounded-lg. I have tried altering the data-te-class-selectInput and data-te-class-inputGroup. I managed to get the inside of the select to adopt the color and rounded-full I wanted by using data-te-class-form-outline.
Not sure why I can get part of the select to have this, but not the gray border. I looked at the other discussions here but the solutions did not work for me. Here is how it currently appears, and the code going along with it:

<div class="w-64 mx-auto mb-6 flex items-center flex-col justify-center text-navblack" > <select id="regionfilter" name="regionfilter" data-te-select-init data-te-select-selectAll="false" data-te-select-select-all="false" data-te-select-filter="true" multiple data-te-class-dropdown="bg-[#BEEDC0] rounded-xl" data-te-class-form-outline="relative bg-[#BEEDC0] rounded-full" data-te-class-formOutline="relative" > > <option value="The Americas (all subregions)"> The Americas (full region) </option> <option value="North America">North America</option> <option value="Central America">Central America</option> <option value="Caribbean">Caribbean</option> <option value="South America">South America</option> </select> <label data-te-select-label-ref class="text-navblack text-roboto font-bold" >Filter by Subregion</label > </div>

As a side note, I also cannot disable the 'select all' within the drop down. Thanks so much for your support in tailwind-elements! I would greatly appreciate any guidance.

[juujisai]

Hi! When passing options and classes as a data attributes remember to change from camelCase to kebab-case

To make the border rounded-full I changed few things:

• notchLeading: instead of rounded-l-[0.25rem] i used rounded-l-full / changed w-2 to !w-6
• notchTrailing: instead of rounded-r-[0.25rem] i used rounded-r-full
• selectLabel: added !ml-4 class

    <select data-te-select-init multiple 
      data-te-select-all="false"
      data-te-class-select-label="!ml-4 pointer-events-none absolute top-0 left-3 mb-0 max-w-[90%] origin-[0_0] truncate text-gray-500 transition-all duration-200 ease-out peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-gray-200 dark:peer-focus:text-gray-200 data-[te-input-state-active]:scale-[0.8]"
      data-te-class-notch-leading="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full !w-6 border-r-0 rounded-l-full group-data-[te-input-focused]:border-r-0 group-data-[te-input-state-active]:border-r-0"
      data-te-class-notch-trailing="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow h-full border-l-0 rounded-r-full group-data-[te-input-focused]:border-l-0 group-data-[te-input-state-active]:border-l-0"
      >
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
      <option value="6">Six</option>
      <option value="7">Seven</option>
      <option value="8">Eight</option>
      <option value="9">Nine</option>
      <option value="10">Ten</option>
    </select>
    <label data-te-select-label-ref>Example label</label>

[anwarenrique]

Thanks so much! super helpful

[RabbiIslamRony]

Thank you