在CSS中选中复选框时更改H1的颜色

Question

我正在尝试创建一个性别切换按钮。但是当我尝试为性别图标着色时，它并没有改变颜色。我正在尝试在CSS中做到这一点。我知道如何用Javascript来做，但是我没用CSS来做。

这是我的代码。

.switch{
   background-color:white;
   width:30vw;
   height:10vw;
   position:absolute;
   border-radius:30vw;
   border:1vw solid #ccc;
   cursor: pointer;
   user-select: none;
   display:inline-block;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
   content:'';
   width:10vw;
   height:10vw;
   background-color:white;
   position:absolute;
   border-radius:50%;
   top:-10%;
   left:-3%;
   transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;

}
.switch::before{
   border:1vw solid lightblue;
}
.switch::after{
   background:#FBD3E1;
   border:1vw solid pink;
}
input:checked + .switch:before {
   background: #D3F0FB;
   transform: translateX(165%);
   border:1vw solid pink;
}
input:checked + .female{
   color:pink;
}
input:checked + .male{
   color:lightblue;
}
input:checked + .switch:after {
   background: #D3F0FB;
   transform: translateX(165%);
   border:1vw solid lightblue;
}
.female, .male{
   position:absolute;
   font-weight:lighter;
   color:#ccc;
}
.female{
   z-index:-1;
   top:13%;
   left:2%;
   transform:rotate(180deg);
   font-size:10vw;
}
.male{
   z-index:-1;
   left:87%;
   top:-145%;
   font-size:10vw;
   transform:rotate(-50deg);
}

<div class="container">
   
   <input id="switch" type="checkbox" hidden>
   <label for="switch" class="switch">
      <h1 class="female">✝</h1>
      <h1 class="male">➜</h1>
   </label>
   
</div>

当我单击复选框时，➜符号应变为浅蓝色，而当我再次单击复选框时，+符号应变为粉红色。

我尝试使用以下代码，但是不起作用。

input:checked + .female{
   color:pink;
}
input:checked + .male{
   color:lightblue;
}

我在哪里做错了。

任何帮助将不胜感激。

谢谢。

Answer 1

您还需要使用父类import React, {Component} from 'react'; import { CardElement, injectStripe } from 'react-stripe-elements'; import { connect } from 'react-redux'; import { Link } from 'react-router-dom'; import { clearCart } from '../actions/clearCartAction'; import getTotal from '../helpers/getTotalHelper'; import { Container, Col, Form, FormGroup, Input, Button } from 'reactstrap'; import './StripeCheckoutForm.css'; import validator from 'validator'; const cardElement = { base: { color: '#32325d', width: '50%', lineHeight: '30px', fontFamily: '"Helvetica Neue", Helvetica, sans-serif', fontSmoothing: 'antialiased', fontSize: '18px', '::placeholder': { color: '#aab7c4' } }, invalid: { color: '#fa755a', iconColor: '#fa755a' } }; const FIREBASE_FUNCTION = 'https://us-central1-velo-velo.cloudfunctions.net/charge/'; // Function used by all three methods to send the charge data to your Firebase function async function charge(token, amount, currency) { const res = await fetch(FIREBASE_FUNCTION, { method: 'POST', body: JSON.stringify({ token, charge: { amount, currency, }, }), }); const data = await res.json(); data.body = JSON.parse(data.body); return data; } class CheckoutForm extends Component { constructor(props) { super(props); this.submit = this.submit.bind(this); } state = { paymentComplete: false, firstName: '', lastName: '', address: '', city: '', prefecture: '', zipCode: '', email: '', submitDisabled: true } inputChangeHandler = (event, name) => { console.log('inputChange', name, event.target.value) event.preventDefault() this.setState({ name: event.target.value }, console.log(this.state.submitDisabled), function(){ this.canSubmit() }) } canSubmit = () => { console.log("canSubmit") const { firstName, lastName, address, city, prefecture,zipCode, email} = this.state if (validator.isAlpha(firstName) && validator.isAlpha(lastName) && address > 0 && validator.isAlpha(city) && validator.isAlpha(prefecture) && zipCode > 0 && validator.isEmail(email)) { this.setState({submitDisabled: false}) } else { this.setState({submitDisabled: true}) } } clearCartHandler = () => { console.log('clearCartHandler'); this.props.onClearCart() } // User clicked submit async submit(ev) { console.log("clicked!") const {token} = await this.props.stripe.createToken({name: "Name"}); const total = getTotal(this.props.cartItems); const amount = total; // TODO: replace with form data const currency = 'USD'; const response = await charge(token, amount, currency); if (response.statusCode === 200) { this.setState({paymentComplete: true}); console.log('200!!',response); this.clearCartHandler(); } else { alert("wrong credit information") console.error("error: ", response); } } render() { if (this.state.complete) { return ( <div> <h1 className="purchase-complete">Purchase Complete</h1> <Link to='/'> <button>Continue Shopping</button> </Link> </div> ); } return ( <div className="checkout-wrapper"> <Container className="App"> <h2 className='text-center'>Let's Checkout</h2> <Form className="form"> <Col> <FormGroup> <Input onChange= {this.inputChangeHandler} type="first name" name={"first name"} value={this.state.firstName} id="exampleEmail" placeholder="first name" /> </FormGroup> </Col> <Col> <FormGroup> <Input onChange= {this.inputChangeHandler} type="last name" name="last name" value={this.state.lastName} id="exampleEmail" placeholder="last name" /> </FormGroup> </Col> <Col> <FormGroup> <Input onChange= {this.inputChangeHandler} type="address" name="address" value={this.state.adress} id="exampleEmail" placeholder="address" /> </FormGroup> </Col> <Col> <FormGroup> <Input onChange= {this.inputChangeHandler} type="city" name="city" value={this.state.city} id="exampleEmail" placeholder="city" /> </FormGroup> </Col> <Col> <FormGroup> <Input onChange= {this.inputChangeHandler} type="prefecture" name="prefecture" value={this.state.prefecture} id="exampleEmail" placeholder="prefecture" /> </FormGroup> </Col> <Col> <FormGroup> <Input onChange= {this.inputChangeHandler} type="zipcode" name="zipcode" value={this.state.zipCode} id="exampleEmail" placeholder="zipcode" /> </FormGroup> </Col> <Col> <FormGroup> <Input onChange= {this.inputChangeHandler} type="email" name="email" value={this.state.email} id="exampleEmail" placeholder="myemail@email.com" /> </FormGroup> </Col> <Button className="save-address-button" disabled={this.state.submitDisabled}>Submit Address</Button> <div className="card-element"> <CardElement style={cardElement}/> </div> </Form> <button className="checkout-button" disabled={false} onClick={this.submit}>Submit</button> </Container> </div> ); } } const mapStateToProps = state => { return { cartItems: state.shoppingCart.cartItems } } const mapDispatchToProps = (dispatch) => { return { onClearCart: () => dispatch(clearCart()) } } export default connect(mapStateToProps, mapDispatchToProps)(injectStripe(CheckoutForm)); ，因为它是输入的同级，而使用switch则只能对同级进行样式设置，并且在未选中时也可以更改h1的颜色

+

input + .switch .female{
   color:pink;
}
input:checked + .switch .male{
   color:lightblue;
}
input + .switch .male{
   color:#ccc;
}
input:checked + .switch .female{
   color:#ccc;
}

.switch{
   background-color:white;
   width:30vw;
   height:10vw;
   position:absolute;
   border-radius:30vw;
   border:1vw solid #ccc;
   cursor: pointer;
   user-select: none;
   display:inline-block;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
   content:'';
   width:10vw;
   height:10vw;
   background-color:white;
   position:absolute;
   border-radius:50%;
   top:-10%;
   left:-3%;
   transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;

}
.switch::before{
   border:1vw solid lightblue;
}
.switch::after{
   background:#FBD3E1;
   border:1vw solid pink;
}
input:checked + .switch:before {
   background: #D3F0FB;
   transform: translateX(165%);
   border:1vw solid pink;
}
input + .switch .female{
   color:pink;
}
input:checked + .switch .male{
   color:lightblue;
}
input + .switch .male{
   color:#ccc;
}
input:checked + .switch .female{
   color:#ccc;
}
input:checked + .switch:after {
   background: #D3F0FB;
   transform: translateX(165%);
   border:1vw solid lightblue;
}
.female, .male{
   position:absolute;
   font-weight:lighter;
   color:#ccc;
}
.female{
   z-index:-1;
   top:13%;
   left:2%;
   transform:rotate(180deg);
   font-size:10vw;
}
.male{
   z-index:-1;
   left:87%;
   top:-145%;
   font-size:10vw;
   transform:rotate(-50deg);
}