如何在点击选项后将CSS样式应用于选择框？

要在点击选项后将CSS样式应用于选择框，可以通过JavaScript来动态地修改选择框的样式。以下是一个简单的示例，展示了如何实现这一功能：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Select Box Styling</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <select id="dynamicSelect" onchange="applyStyle()">
        <option value="default">请选择</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
    </select>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

/* 默认样式 */
#dynamicSelect {
    width: 200px;
    padding: 10px;
    border: 1px solid #ccc;
}

/* 选中特定选项后的样式 */
#dynamicSelect.option1 {
    border-color: blue;
}

#dynamicSelect.option2 {
    border-color: green;
}

#dynamicSelect.option3 {
    border-color: red;
}

JavaScript部分（script.js）

function applyStyle() {
    const selectBox = document.getElementById('dynamicSelect');
    const selectedValue = selectBox.value;
    selectBox.className = selectedValue; // 动态设置类名
}