Different looking dropdown menu on Web & Desktop (macOS)

[abhi3700]

Problem

The dropdown menu doesn't look the same on web & desktop.

Steps To Reproduce

Steps to reproduce the behavior:

• Use this component function.

#[component]
fn CoinInput() -> Element {
	rsx! {
        // Coin input
        form { class: "max-w-sm mx-auto",
            label {
                r#for: "coin",
                class: "block mb-2 font-sans text-gray-900 dark:text-white text-base",
                "Select "
                b { "Coin 🪙" }
            }
            select {
                id: "coin",
                class: "bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 font-sans",
                // option { value: "", disabled: "true", selected: "true", "Select coin" }
                option { value: "usdt", {StableCoin::USDT.to_string()} }
                option { value: "usdc", {StableCoin::USDC.to_string()} }
                option { value: "dai", {StableCoin::DAI.to_string()} }
            }
        }
    }
}

Expected behavior

The same code should generate same looking UI on both these platforms.

Screenshots

On Web:

Ideally, the web look is the expected one.

On Desktop:

Environment:

• Dioxus version: 0.6.1
• Rust version: 1.82.0
• OS info: MacOS
• App platform: web, desktop

Questionnaire

[abhi3700]

Able to make the size same except the unncessary color gradient on native.

Current look:

Expected look: