Select option values not displaying correctly

I have a simple dropdown select option, created in VueJs3.

For some reason the options once selected are displaying as half obscured, see below:

Adjusting the CSS on each value appears to have no effect, does anyone have a suggestion for what could be the cause of such an issue?

Code:

<template>
  <div>
    <select 
      class="select select-bordered w-full select-sm 
      leading-4 pb-1.5 font-normal  text-gray-500">
      <option disabled selected>{{$t(`${label}`)}}</option>
      <option value="1">{{ $t(`foo`) }}</option>
      <option value="2">{{ $t(`bar`) }}</option>
      <option value="3">{{ $t(`foo_two`) }}</option>
    </select>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  label: {
    type: String,
    default: "",
  },
  required: {
    type: Boolean,
    default: false,
  },
});

</script>
<style scoped lang="scss">

</style>