如何用CSS样式化Select/Option标签？替换为ul/li并保留原有功能

尝试为基于Informed库的Select和Option标签添加动画与样式时遇到困难，现有Select.js组件代码如下：

import React, { Fragment } from 'react';
import { arrayOf, node, number, oneOfType, shape, string } from 'prop-types';
import {
    Option as InformedOption,
    Select as InformedSelect,
    useFieldState
} from 'informed';

import { useStyle } from '@magento/venia-ui/lib/classify';
import { FieldIcons, Message } from '@magento/venia-ui/lib/components/Field';
import defaultClasses from './select.module.css';
import Icon from '@magento/venia-ui/lib/components/Icon';
import { ChevronDown as ChevronDownIcon } from 'react-feather';

const arrow = <Icon src={ChevronDownIcon} size={24} />;

const Select = props => {
    const {
        before,
        classes: propClasses,
        field,
        items,
        message,
        ...rest
    } = props;
    const fieldState = useFieldState(field);
    const classes = useStyle(defaultClasses, propClasses);
    const inputClass = fieldState.error ? classes.input_error : classes.input;

    const options = items.map(
        ({ disabled = null, hidden = null, label, value, key = value }) => (
            <option
                key={key}
                disabled={disabled}
                hidden={hidden}
                value={value}
                style={{ backgroundColor: 'red', color: 'red' }}
            >
                {label || (value != null ? value : '')}
            </option>
        )
    );

    return (
        <Fragment>
            <FieldIcons after={arrow} before={before}>
                <InformedSelect {...rest} className={inputClass} field={field}>
                    {options}
                </InformedSelect>
            </FieldIcons>
            <Message fieldState={fieldState}>{message}</Message>
        </Fragment>
    );
};

export default Select;

Select.propTypes = {
    before: node,
    classes: shape({
        input: string
    }),
    field: string.isRequired,
    items: arrayOf(
        shape({
            key: oneOfType([number, string]),
            label: string,
            value: oneOfType([number, string])
        })
    ),
    message: node
};

需求：

• 为现有Select/Option标签添加样式与动画
• 或替换为ul/li结构并保留Informed表单的原有功能

附Select/Option标签截图：

方案一：为原生Select/Option添加样式与动画 #

原生<select>和<option>受浏览器样式限制较多，但可通过以下方式优化：

1. 自定义Select容器样式 #

利用容器隐藏原生箭头，模拟自定义下拉框外观：

/* select.module.css */
.input {
    appearance: none; /* 隐藏原生箭头 */
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.input:hover {
    border-color: #999;
}

.input:focus {
    outline: none;
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.input_error {
    border-color: #f44336;
}

.fieldIcons {
    position: relative;
}

.fieldIcons .icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.fieldIcons.open .icon {
    transform: translateY(-50%) rotate(180deg);
}

修改组件添加下拉状态切换：

// 在Select组件中引入useState
import React, { Fragment, useState } from 'react';

// ...其余代码不变

const Select = props => {
    // 添加下拉状态管理
    const [isOpen, setIsOpen] = useState(false);
    const handleToggle = () => setIsOpen(!isOpen);

    // ...其余代码不变

    return (
        <Fragment>
            <FieldIcons 
                after={arrow} 
                before={before}
                className={`${classes.fieldIcons} ${isOpen ? classes.open : ''}`}
            >
                <InformedSelect 
                    {...rest} 
                    className={inputClass} 
                    field={field}
                    onFocus={handleToggle}
                    onBlur={handleToggle}
                >
                    {options}
                </InformedSelect>
            </FieldIcons>
            <Message fieldState={fieldState}>{message}</Message>
        </Fragment>
    );
};

2. 优化Option样式 #

原生<option>样式支持有限，可设置基础样式：

.input option {
    padding: 0.5rem;
    background-color: white;
    color: #333;
}

.input option:disabled {
    color: #999;
    background-color: #f5f5f5;
}

.input option:hover {
    background-color: #e3f2fd; /* 仅部分浏览器支持hover效果 */
}

方案二：替换为ul/li结构并保留Informed功能 #

通过自定义组件结合Informed的hooks，完全可控样式与动画：

1. 自定义UlLiSelect组件 #

import React, { useState, Fragment } from 'react';
import { useField, useFieldState } from 'informed';
import { arrayOf, bool, node, number, oneOfType, shape, string } from 'prop-types';
import { useStyle } from '@magento/venia-ui/lib/classify';
import { FieldIcons, Message } from '@magento/venia-ui/lib/components/Field';
import defaultClasses from './ulLiSelect.module.css';
import Icon from '@magento/venia-ui/lib/components/Icon';
import { ChevronDown as ChevronDownIcon } from 'react-feather';

const arrow = <Icon src={ChevronDownIcon} size={24} />;

const UlLiSelect = props => {
    const { before, classes: propClasses, field, items, message, ...rest } = props;
    const { value, setValue } = useField(field);
    const fieldState = useFieldState(field);
    const classes = useStyle(defaultClasses, propClasses);
    const [isOpen, setIsOpen] = useState(false);

    // 获取选中项
    const selectedItem = items.find(item => item.value === value) || items[0];

    // 处理选项点击
    const handleOptionClick = (item) => {
        if (!item.disabled) {
            setValue(item.value);
            setIsOpen(false);
        }
    };

    // 点击外部收起下拉框
    React.useEffect(() => {
        const handleClickOutside = (e) => {
            const container = document.querySelector(`[data-field="${field}"]`);
            if (container && !container.contains(e.target)) {
                setIsOpen(false);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, [field]);

    return (
        <Fragment>
            <FieldIcons 
                after={arrow} 
                before={before}
                className={`${classes.fieldIcons} ${isOpen ? classes.open : ''}`}
                data-field={field}
            >
                {/* 模拟Select触发框 */}
                <div 
                    className={`${classes.selectTrigger} ${fieldState.error ? classes.error : ''}`}
                    onClick={() => setIsOpen(!isOpen)}
                    {...rest}
                >
                    {selectedItem?.label || selectedItem?.value}
                </div>

                {/* 下拉选项列表 */}
                {isOpen && (
                    <ul className={classes.optionsList}>
                        {items.map(({ disabled = false, label, value, key = value }) => (
                            <li
                                key={key}
                                className={`${classes.option} ${disabled ? classes.disabled : ''} ${value === value ? classes.selected : ''}`}
                                onClick={() => handleOptionClick({ disabled, value })}
                            >
                                {label || value}
                            </li>
                        ))}
                    </ul>
                )}
            </FieldIcons>
            <Message fieldState={fieldState}>{message}</Message>
        </Fragment>
    );
};

UlLiSelect.propTypes = {
    before: node,
    classes: shape({
        selectTrigger: string,
        optionsList: string,
        option: string,
        disabled: string,
        selected: string,
        error: string
    }),
    field: string.isRequired,
    items: arrayOf(
        shape({
            key: oneOfType([number, string]),
            label: string,
            value: oneOfType([number, string]),
            disabled: bool
        })
    ),
    message: node
};

export default UlLiSelect;

2. 对应的CSS样式（ulLiSelect.module.css） #

.fieldIcons {
    position: relative;
    width: 100%;
}

.selectTrigger {
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.selectTrigger:hover {
    border-color: #999;
}

.selectTrigger:focus {
    outline: none;
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.selectTrigger.error {
    border-color: #f44336;
}

.optionsList {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: white;
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    animation: slideDown 0.2s ease forwards;
    opacity: 0;
    transform: translateY(-10px);
    z-index: 10;
}

@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.option {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.option:hover:not(.disabled) {
    background-color: #e3f2fd;
}

.option.disabled {
    color: #999;
    cursor: not-allowed;
    background-color: #f5f5f5;
}

.option.selected {
    background-color: #bbdefb;
    font-weight: 500;
}

.open .icon {
    transform: translateY(-50%) rotate(180deg);
}

功能说明 #

• 完全保留Informed的表单绑定、错误状态处理功能
• 支持自定义下拉展开动画、hover/选中/禁用状态样式
• 实现点击外部收起下拉框的交互逻辑
• 样式完全可控，无浏览器原生限制

内容的提问来源于stack exchange，提问作者nathannewyen