Question

我正在使用具有名片视图的电子商务系统的前端。我必须用不同颜色的水平自定义样式显示单选按钮

我在卡中放置了单选按钮，还进行了自定义，但是问题是，应用自定义样式时，它不能水平工作。

HTML

/registration

CSS

router.route('/registration')
    .post(body('username_email').custom(value => {
        return UserModel.findOne({ 'username_email': value }).then(user => { // Return Promise
            if (user) {
                return Promise.reject('E-mail already in use');
            }
        });
    }), async(req, res, next) => {
        // Checks for errors in validation
        const errors = validationResult(req);
        if (!errors.isEmpty()) {
            return res.status(409).json({ errors: errors.array() });
        }
        try {
            let newUser = new UserModel(req.body)
            let savedUser = await newUser.save()

            if (savedUser) return res.redirect('/users/registration?success=true');
            return next(new Error('Failed to save user for unknown reasons'))
        } catch (err) {
            return next(err)
        }
    })

单选按钮是单色的垂直按钮，但需要水平和多色

Answer 1

您不能同时使用 input和radio的{{1}}类型。

如果仅使用checkbox，那么您的示例将按预期工作：

radio

/* Customize the label (the container) */
.contain {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.contain input {
  /*position: absolute;*/
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.contain:hover input~.checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.contain input:checked~.checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.contain input:checked~.checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.contain .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

Answer 2

将此代码替换您的代码

.contain {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.contain input {
  /*position: absolute;*/
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.contain:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.contain input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.contain input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.contain .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.all_radio{
  display: inline-flex;
}

<div class="card-body ">
   <span style="color: #B4B4B4"><h5><b>Color</b></h5></span>
       <form>
        <div class="all_radio">
           <label class="radio-inline contain">
           <input type="radio" name="optradio" >
           <span class="checkmark"></span>
           </label>
           <label class="radio-inline contain">
           <input type="radio" name="optradio">
           <span class="checkmark"></span>
           </label>
           <label class="radio-inline contain">
           <input type="radio" name="optradio">
           <span class="checkmark"></span>
           </label>          
        </div>
       </form>
</div>

Answer 3

您可以使用此代码


<!DOCTYPE html>
    <html>
    <head>
        <title>Page Title</title>
        <style type="text/css">
            .contain {
                display: inline-block;
                position: relative;
                padding-left: 35px;
                margin-bottom: 12px;
                cursor: pointer;
                font-size: 22px;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .contain input {
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }
            .checkmark {
                position: absolute;
                top: 0;
                left: 0;
                height: 25px;
                width: 25px;
                background-color: blue;
                border-radius: 50%;
            }
            .checkmark.one {
                position: absolute;
                top: 0;
                left: 0;
                height: 25px;
                width: 25px;
                background-color: green;
                border-radius: 50%;
            }
            .checkmark.two {
                position: absolute;
                top: 0;
                left: 0;
                height: 25px;
                width: 25px;
                background-color: red;
                border-radius: 50%;
            }
            .contain:hover input ~ .checkmark {
                background-color: blue;
            }
            .contain:hover input ~ .checkmark.one {
                background-color: green;
            }
            .contain:hover input ~ .checkmark.two {
                background-color: red;
            }
            .contain input:checked ~ .checkmark {
                background-color: blue;
            }
            .contain input:checked ~ .checkmark.one {
                background-color: green;
            }
            .contain input:checked ~ .checkmark.two {
                background-color: red;
            }
            .checkmark:after {
                content: "";
                position: absolute;
                display: none;
            }
            .contain input:checked ~ .checkmark:after {
                display: block;
            }
            .contain .checkmark:after {
                top: 9px;
                left: 9px;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: white;
            }
        </style>
    </head>
    <body>
    <div class="card-body">
        <span style="color: #707070; font-size: 18px;"><h5><b>Color</b></h5></span>
        <form>
            <label class="radio-inline contain">
                <input type="radio" name="optradio" >
                <span class="checkmark"></span>
            </label>
            <label class="radio-inline contain">
                <input type="radio" name="optradio">
                <span class="checkmark one"></span>
            </label>
            <label class="radio-inline contain">
                <input type="radio" name="optradio">
                <span class="checkmark two"></span>
            </label> 
        </form>
    </div>
    </body>
    </html>

如何在卡片视图中显示水平的自定义单选按钮

3 个答案: