是否可以仅使用CSS更改选择空白颜色

Question

const MyTabView = TabNavigator(
  {     
    Projects: { screen: Projects },     
    Explorer: { screen: Explorer },
    Profil: { screen: Profil }, ... 
  }        
);



const StackView = StackNavigator(
  {
    global: {
      screen: MyTabView,
      headerMode: "none",
      header: null,
      navigationOptions: {
        header: null
      }
    },

    TermsOfUse: { screen: TermsOfUse },
    LegalNotice: { screen: LegalNotice },
    Options: { screen: Options }, ...       
  } 
);

export default class App extends React.PureComponent {
  constructor (props) {
    super(props); 
    console.log(this.props.navigation); // <----------  UNDEFINED
  }


  render() {
    return (
      <Provider store={store}>
        <PersistGate
          loading={<ActivityIndicator />}
          persistor={persistor}>

          <View style={styles.fullScreen}>
            <StackView />

            <Tutorial navigation={this.props.navigation} />  // <----------  this.props.navigation  is  UNDEFINED
          </View>
        </PersistGate>
      </Provider>
    );
  }
}

当用户看到“ ＝选择＝”时，我希望颜色为灰色。
选择“ 1”时，颜色为黑色，如下图所示：

<select>
  <option disabled selected>＝select＝</option>
  <option>1</option>
</select>

是否可以仅使用CSS更改颜色？谢谢！

Answer 1

您可以使用函数来更改class元素select的{​​{1}}：

onchange

var myselect = document.getElementById("select1");

function colourFunction() {
  var colour = myselect.options[myselect.selectedIndex].className;
  myselect.className = colour;
}

// Call function on load:
colourFunction();

.color_gray {
  color: gray;
}

.color_black {
  color: black;
}

请注意，我还在<select id="select1" onchange="colourFunction()"> <option disabled selected class='color_gray'>＝select＝</option> <option class='color_black'>1</option> </select>元素上使用了彩色的class es。但这不是强制性的。

希望有帮助。