/* Style for the select container */ .select-container { position: relative; display: inline-block; } /* Base style for the select */ .select-container select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 2px solid #ccc; padding: <0px; font-size: 20px; border-radius: 15px; background-color: #fff; width: 100%; transition: border-color 0.3s, background-color 0.3s; } /* Hover and focus styles */ .select-container select:hover, .select-container select:focus { border-color: #888; } /* Arrow icon */ .select-container::after { content: '\25BE'; /* Unicode downward arrow */ position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 30px; color: #666; pointer-events: none; } /* Disabled state */ .select-container select:disabled { opacity: 0.6; pointer-events: none; } /* Styling options */ .select-container select option { padding: 10px; } /* Example color variation for selected option */ .select-container select option:checked { background-color: #007bff; color: #fff; } /* Optional: Add a box shadow on focus */ .select-container select:focus { box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); }