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

原文 标签 css styled-components

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

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

enter image description here

它在桌面上一切正常,但在移动浏览器(Android 或 IOS)上查看时,用户会看到:

enter image description here

下面是我完整的 react 组件,任何想法我做错了什么?

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()}>☆</option>
                      return <option value={object.toString()} key={object.toString()}>☆</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;
`;

最佳答案

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

希望这会奏效。

关于css - 选择选项未在移动设备上显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45236118/

相关文章:

javascript - 删除导航和横幅之间的空白

css - 覆盖样式组件 3 次?

css - 使用样式组件隐藏输入微调器

reactjs - 样式组件 : How to target direct children?

html - CSS顶栏:垂直分隔符包装了栏的内容

javascript - css/js 将固定元素上的滚动事件委托(delegate)给它们下面的元素

javascript - 向下滚动时导航栏未固定在顶部

css - 如何在 asp.net 网站上正确定位谷歌地图?

javascript - 如何使所有图像适合相同大小的div

javascript - Gatsby.js 的 GraphQL 查询回调