如何选择收音机/ chekbox按钮进行样式设计？

Question

我想设置收音机/复选框按钮的样式，我看到了很多片段用于检查|之前|在伪元素之后，看起来像这样：

input[type="radio"] + label:before

但这指的是html标签顺序，例如：

<input type="radio" id="male" />
<label for="male"> Male </label>

仅当按钮放在文本之前时才有用。 我用过：

<label for="male"> Male 
<input type="radio" id="male" name="gender" />
</label>

在这种情况下，如何选择按钮？ 假设，如果我的代码看起来像这样，我该如何选择它：

 <label for="male"> Male </label>
    <input type="radio" id="male" name="gender" />

我的Codepen（现在有点乱 - 正在对齐）

Answer 1

对于CSS Chx / Rad Hack，您需要执行以下操作：

• 所有<input type='radio/checkbox'>都有display;none

• 每个配对的<label/input>都有

  <label for='input#ID'...   <input id='input#ID'...

• 定位每对，以便可以严格控制相邻的兄弟姐妹组合+。：

  <input>   <label></label>   .rad:checked + label::before

<小时/>

演示

修改在演示中评论

<小时/>

@import url("https://fonts.googleapis.com/css?family=Jura|Lobster");
body,
html {
  height: 100%;
  margin: 0;
}


/* styles to make borders not take on extra space */

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  /* fix for the scrollbar push issue */
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
}


/* Browser style reset so they all play nice */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
time,
mark,
audio,
video {
  font-size: 100%;
  margin: 0;
  padding: 0;
  outline: 0 none;
  vertical-align: baseline;
}


/* Now we Starting to code */

body {
  background-color: #FAFDD9;
}

#title {
  text-align: center;
  font-size: 48pt;
  color: #08ABD9;
  font-family: 'Lobster', sans-serif;
  margin-top: 40px;
  margin-bottom: 8x;
}

hr {
  height: 1px;
  border-color: white;
}

p {
  color: #fff;
  font-family: 'jura', sans-serif;
  font-size: 17pt;
  margin-top: -8px;
}

legend {
  color: #fff;
  font-family: 'jura', sans-serif;
}

select,
input[type="number"] {
  cursor: pointer;
}

.form-style {
  width: 800px;
  position: relative;
  background: -webkit-linear-gradient(-45deg, #001d26 1%, #103842 47%, #001d26 100%);
  background: -moz-linear-gradient(-45deg, #001d26 1%, #103842 47%, #001d26 100%);
  background: linear-gradient (-45deg, #001d26 1%, #103842 47%, #001d26 100%);
  border: 6px solid #08ABD9;
  border-radius: 16px;
  -webkit-box-shadow: 0px 2px 8px rgba(29, 31, 32, 0.3);
  -moz-box-shadow: 0px 2px 8px rgba(29, 31, 32, 0.3);
  box-shadow: 0px 2px 8px rgba(29, 31, 32, 0.3);
  -webkit-box-shadow: inset 0px 0px 4px rgba(29, 31, 32, 0.8);
  -moz-box-shadow: inset 0px 0px 4px rgba(29, 31, 32, 0.8);
  box-shadow: inset 0px 0px 4px rgba(29, 31, 32, 0.8);
  line-height: 16px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  margin-bottom: 80x;
}

label,
legend {
  color: #fff;
  font-family: 'jura', sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}

#description {
  color: #1a1a1a;
  padding-top: 16px;
  margin-bottom: 40px;
  text-align: center;
}


/*tried to change from column to row */

#fname,
#email-a,
#phone,
#dropdown,
#mrole,
#age,
#textbox {
  display: flex;
  flex-flow: column wrap;
}

#fname label,
#email-a label,
#phone label,
#dropdown label,
#mrole label,
#age label,
#player label,
#textbox label,
legend {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8px;
}

#fname input,
#email-a input,
#phone input,
#dropdown select,
#mrole select,
#age input,
#textbox textarea {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

input[type="text"] {
  font-family: 'roboo', sans-serif;
}

#gender {
  margin: auto;
}

#player input[type="checkbox"] {
  margin-right: 24px;
}

select {
  vertical-align: top;
}

input[type="submit"] {
  display: block;
  background-color: #08ABD9;
  font-family: 'jura', sans-serif;
  font-size: 16pt;
  font-weight: bold;
  height: 40px;
  border: none;
  margin-top: 40px;
  margin-bottom: 0px;
  width: 100%;
}

input[type="submit"]:hover {
  display: block;
  background-color: #0792B9;
}

#fname,
#email-a {
  margin:
}

"#name",
"#email",
"#number",
#gil,
select,
textarea {
  border-radius: 4px;
  height: 32px;
}

input,
select {
  margin-bottom: 24px;
}

textarea {
  height: 160px;
}

textarea:focus,
input:focus {
  border: 1px solid #08ABD9;
  box-shadow: inset 0 0 8px #08ABD9;
  -webkit-box-shadow: inset 0 0 8px #08ABD9;
  -moz-box-shadow: inset 0 0 8px #08ABD9;
}


/* CSS Modifications */

input,
select {
  font: inherit
}

.rad,
.chx {
  display: none;
}

.rad+label,
.chx+label {
  display: inline-block;
  padding: 0;
  margin: 5px;
  cursor: pointer;
}

.rad+label::before {
  content: '\1f518';
  box-shadow: -0.25px 2.5px 2px 1.25px rgba(21, 91, 131, 0.7);
  border-radius: 50%;
}

.rad:checked+label::before {
  content: '\1f535';
  box-shadow: 0px 3px 1px 2.2px rgba(38, 114, 141, 0.7);
}

.chx+label::before {
  content: '\1f532';
  box-shadow: -0.25px 2.5px 2px 1.25px rgba(21, 91, 131, 0.7);
  height: 36px;
  width: 36x;
  font-size: 16px;
  margin: 0 5px 0 5px;
  font-size: 3ex;
}

#guitar:checked+label::before {
  content: '\1f3b8';
  box-shadow: 0px 1px 1px 1.2px rgba(38, 114, 141, 0.7);
  color: rgba(242, 244, 250, 0.8);
  font-size: 3ex;
}

#bass:checked+label::before {
  content: '\1f3b8';
  box-shadow: 0px 1px 1px 1.2px rgba(38, 114, 141, 0.7);
  color: rgba(242, 244, 250, 0.8);
  font-size: 3ex;
}

#drums:checked+label::before {
  content: '\1f941';
  box-shadow: 0px 1px 1px 1.2px rgba(38, 114, 141, 0.7);
  color: rgba(242, 244, 250, 0.8);
  font-size: 3ex;
  margin: 0 12px 0 0
}

#fiddle:checked+label::before {
  content: '\1f3bb';
  box-shadow: 0px 1px 1px 1.2px rgba(38, 114, 141, 0.7);
  color: rgba(242, 244, 250, 0.8);
  font-size: 3ex;
}

#saxophone:checked+label::before {
  content: '\1f3b7';
  box-shadow: 0px 1px 1px 1.2px rgba(38, 114, 141, 0.7);
  color: rgba(242, 244, 250, 0.8);
  font-size: 3ex;
}

#other:checked+label::before {
  content: '\1f3bc';
  box-shadow: 0px 1px 1px 1.2px rgba(38, 114, 141, 0.7);
  color: rgba(242, 244, 250, 0.8);
  font-size: 3ex;
}

#textbox,
#mrole {
  margin-top: 25px;
}

fieldset {
  padding: 10px;
  border-radius: 12px;
}

<!doctype html>
<html>

<head>

  <meta charset="UTF-8">

</head>

<body>

  <form class="form-style">

    <fieldset class="container">

      <h1 id="title"> Music - Survey Form </h1>

      <div id="description">
        <p> Lets Find Out What Kind Of Music You Like</p>
      </div>

      <div id="fname">
        <label for="name"> Full Name *</label>
        <input type="text" id="name" placeholder="What's your name" required />

      </div>

      <div id="email-a">
        <label for="email">  Email * </label>
        <input type="text" id="email" placeholder="What's your email" required />

      </div>

      <div id="phone">
        <label for="number"> Phone </label>
        <input type="text" id="number" placeholder="what's your number" />
      </div>

      <fieldset id="gender">

        <input type="radio" id="male" name="gender" class='rad' />
        <label for="male"> Male </label>

        <input type="radio" id="female" name="gender" class='rad' />
        <label for="female"> Female </label>

      </fieldset>

      <div id="age">
        <label for="gil"> Age</label>
        <input type="number" id="gil" />

      </div>

      <fieldset id="frequent">
        <legend> How Frequent Do You Listen To Music </legend>

        <input type="radio" id="aday" name="frequent" class='rad' />
        <label for="aday">All day </label>

        <input type="radio" id="eday" name="frequent" class='rad' />
        <label for="eday">Every day </label>

        <input type="radio" id="oday" name="frequent" class='rad' />
        <label for="oday">Every other day </label>

        <input type="radio" id="party" name="frequent" class='rad' />
        <label for="party">I'm a party person </label>
      </fieldset>

      <div id="mrole">
        <label for="role"> Which Best Describes Your Main Role?</label>
        <select name="role">
          <option value=""> Select an option </option>
          <option value="Student"> Student </option>
          <option value="Military"> Military </option>
          <option value="Academic"> Academic </option>
          <option value="Full time job"> Full Time Job </option>
          <option value="Prefer Not To Say"> Prefer Not To Say</option>
          <option value="Other"> Other</option>

        </select>
      </div>

      <div id="dropdown">
        <label for="gener"> Choose A Music Genre </label>
        <select name="gener">
          <option value=""> Select an option </option>
          <option value="African"> African </option>
          <option value="Asian"> Asian </option>
          <option value="Avant-garde"> Avant-garde </option>
          <option value="Blues"> Blues </option>
          <option value="Caribbean"> Caribbean </option>
          <option value="Country"> Country </option>
          <option value="Electronic"> Electronic </option>
          <option value="Hip hop"> Hip hop </option>
          <option value="Jazz"> Jazz </option>
          <option value="Folk"> Folk </option>
          <option value="Latin"> Latin </option>
          <option value="Other"> other </option>
        </select>
      </div>

      <fieldset id="player">
        <legend> Let Us Know If Play An Instrument </legend>

        <input type="checkbox" id="guitar" class='chx' />
        <label for="guitar"> Guitar </label>

        <input type="checkbox" id="bass" class='chx' />
        <label for="bass"> Bass Guitar </label>

        <input type="checkbox" id="drums" class='chx' />
        <label for="drums"> Drums </label>

        <input type="checkbox" id="fiddle" class='chx' />
        <label for="fiddle"> Fiddle </label>

        <input type="checkbox" id="saxophone" class='chx' />
        <label for="saxophone"> Saxophone </label>

        <input type="checkbox" id="other" class='chx' />
        <label for="other"> Other </label>

      </fieldset>

      <div id="textbox">
        <label for="tbox">Please Tell Us More About Your Self</label>
        <textarea type="text" id="tbox"></textarea>

      </div>

      <div id="btn">
        <input type="submit" value="Submit" />

      </div>

      </div>
      <!-- Closing div-container -->
    </fieldset>

  </form>
</body>