css - 选择选项未在移动设备上显示

Question

使用 react 和 styled-components 我设法编写了一个小组件来提出问题并显示一个带有 5 个选项/开始的栏供用户选择。

这是它应该看起来的样子：

它在桌面上一切正常，但在移动浏览器（Android 或 IOS）上查看时，用户会看到：

下面是我完整的反应组件，任何想法我做错了什么？

import React, {Component} from 'react';
import styled from 'styled-components';
import _ from 'lodash';

class Question extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.value
        }
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
      this.setState({
          value: event.target.value
      });
      this.props.onChange(event);
    }
    render() {
      const {name, value, totalStars, caption} = this.props;
        return (
            <Container className="rateOptions">
                <Caption>{caption}</Caption>
                <Rating name={name} size={totalStars - 1} onChange={this.handleChange}>
                    {_.range(1, totalStars).reverse().map(function(object) {
                      if(object.toString() ===value)
                        return <option selected value={object.toString()} key={object.toString()}>☆&lt;/option>
                      return <option value={object.toString()} key={object.toString()}>☆&lt;/option>
                    })}
                </Rating>
                <RateValue>
                    {this.state.value}
                    / 5
                </RateValue>
            </Container>
        );
    }
}
export default Question;

const Rating = styled.select `
  background: none;
  font-size:30px;
  color: gold;
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
  overflow: hidden;
  margin: 10px 0;
  height: 35px;
  outline: 0;
  border:none;
  float: left;
  -webkit-appearance: none;
  -moz-appearance: none;
  > option {
    display: inline-block;
    position: relative;
    cursor: pointer;
  }
  > option:hover, > option:hover ~ option, > option:checked, > option:checked ~ option {
     color: transparent;
  }
  > option:hover:before, option:hover ~ option:before, option:checked:before, option:checked ~ option:before {
     content: "★";
     position: absolute;
     color: gold;
     text-shadow: 2px 2px 1px #000;
  }
  > option:hover, option:checked, option:active, option:focus {
    box-shadow: 0 0 10px 100px #000 inset;
  }
  `;
const Container = styled.div `
  clear: both;
`;
const Caption = styled.div `
  font-size: 1.2em;
`;
const RateValue = styled.div `
  float: left;
  padding:20px 10px;
`;

Answer 1

您必须在 select 选项上调用 refresh 方法来更新其视觉样式。

希望这会奏效。