Как изменить цвет тела, но не повлиять на div? - PullRequest
Новая
       4

Как изменить цвет тела, но не повлиять на div?

1 голос
/ 26 мая 2020

Недавно ударился о стену. Пробовали селектор body: not (.wrapper .group), но он не меняет внешний цвет div.

Я не могу найти другой способ изменить цвет тела, не беспокоясь

Вот что у меня есть: 

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #8e44ad;
  color: white;
}

/*body:not(.wrapper .group) {
  background: white;
}*/

.wrapper {
  margin: 50px 20px 50px 20px;
  /* background-color: chartreuse; */
  border: 2px solid #fff;
  border-radius: 5px;
    /* background: #8e44ad;
    color: white; */
}

h1 {
  margin: 0 0 1em;
}

.group {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}

.newdiv {
  margin-top: 200px;
  display: flex;
  flex-direction: row;
}

.group1 {
  display: flex;
  flex-direction: column;
}

.group3 {
  display: flex;
  flex-direction: column;
}

input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

label {
  position: relative;
  margin-right: 1em;
  padding-left: 2em;
  padding-right: 1em;
  line-height: 2;
  cursor: pointer;
}
label:before {
  box-sizing: border-box;
  content: " ";
  position: absolute;
  top: 0.3em;
  left: 0;
  display: block;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid white;
  border-radius: 0.25em;
  z-index: -1;
}

input[type="radio"] + label::before {
  border-radius: 1em;
}

/* Checked */
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
  padding-left: 1em;
  color: #8e44ad;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  top: 0;
  width: 100%;
  height: 2em;
  background: white;
}

/* Transition */
label,
label::before {
  -webkit-transition: 0.25s all ease;
  -o-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <h1>Pure CSS Fancy Checkbox/Radio</h1>

      <h2>Radio Buttons</h2>
      <div class="group">
        <input type="radio" name="rb" id="rb1" />
        <label for="rb1">Check this</label>
        <input type="radio" name="rb" id="rb2" />
        <label for="rb2">... or this...</label>
        <input type="radio" name="rb" id="rb3" />
        <label for="rb3">or maybe this</label>
      </div>

      <h2>Checkbox</h2>
      <div class="group">
        <input type="checkbox" name="cb" id="cb1" />
        <label for="cb1">Heart disease </label>
        <input type="checkbox" name="cb" id="cb2" />
        <label for="cb2">Anemia or other blood disease</label>
        <input type="checkbox" name="cb" id="cb3" />
        <label for="cb3">Severe headaches</label>
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1d" />
        <label for="q1d">Neck pain</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1e" />
        <label for="q1e">High cholesterol</label>
        <br />
        <input type="checkbox" name="q1" value="a" id="q1f" />
        <label for="q1f">Stomach disease</label>
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1g" />
        <label for="q1g">Stroke</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1h" />
        <label for="q1h">Sleep apnea</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1i" />
        <label for="q1i">Diabetes</label> <br />
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1j" />
        <label for="q1j">Cancer (past or present) </label><br />
        <input type="checkbox" name="q1" value="a" id="q1k" />
        <label for="q1k">Depression</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1l" />
        <label for="q1l">High blood pressure</label>
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1m" />
        <label for="q1m" class="radio-inline">Thyroid disease</label>
        <br />
        <input type="checkbox" name="q1" value="a" id="q1n" />
        <label for="q1n">Seizures</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1o" />
        <label for="q1o">Back pain</label> <br />
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1p" />
        <label for="q1p">Lung disease</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1q" />
        <label for="q1q">Kidney, bladder or prostate disease</label>
        <br />
        <input type="checkbox" name="q1" value="a" id="q1r" />
        <label for="q1r">Blood clots</label> <br />
      </div>
      <div class="newdiv">
        <div class="group1">
          <input type="checkbox" name="q1" value="a" id="q1j" />
          <label for="q1j">Cancer (past or present) </label><br />
          <input type="checkbox" name="q1" value="a" id="q1k" />
          <label for="q1k">Depression</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1l" />
          <label for="q1l">High blood pressure</label>
        </div>
        <div class="group1">
          <input type="checkbox" name="q1" value="a" id="q1m" />
          <label for="q1m" class="radio-inline">Thyroid disease</label>
          <br />
          <input type="checkbox" name="q1" value="a" id="q1n" />
          <label for="q1n">Seizures</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1o" />
          <label for="q1o">Back pain</label> <br />
        </div>
        <div class="group3">
          <input type="checkbox" name="q1" value="a" id="q1p" />
          <label for="q1p">Lung disease</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1q" />
          <label for="q1q">Kidney, bladder or prostate disease</label>
          <br />
          <input type="checkbox" name="q1" value="a" id="q1r" />
          <label for="q1r">Blood clots</label> <br />
        </div>
      </div>
    </div>
  </body>
</html>

Ответы [ 5 ]

1 голос
/ 26 мая 2020

По умолчанию все элементы, являющиеся дочерними для body (и большинства других элементов, если на то пошло), наследуют его атрибут background. Как было предложено ov, изменение фона элемента .wrapper будет работать. См. JsFiddle ниже.

https://jsfiddle.net/us3fct9w/

0 голосов
/ 26 мая 2020

Как упоминалось выше ov и Jason Steinhauser, изменение тела повлияет на элементы ниже в иерархии, поэтому я изменил подход к дизайну.

Спасибо за помощь, ребята, мне действительно нужна была такая обратная связь, особенно когда я кодирую несколько часов и мой разум затуманен! 

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #fff;
  color: #15c39a;
  font-family: "Gotham Light", "Futura Bold Italic";
  font-weight: 100;
}

@font-face {
  font-family: "Gotham Light";
  src: url("Fonts/Gotham/Gotham-Light.otf");
  font-style: normal;
  font-weight: 100;
}

.wrapper {
  margin: 50px 20px 50px 20px;
  padding: 20px 0px 10px 20px;
  border: 2px solid #15c39a;
  border-radius: 5px;
}

h1 {
  margin: 0 0 1em;
}

.group {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}

.newdiv {
  margin-top: 200px;
  display: flex;
  flex-direction: row;
}

.group1 {
  display: flex;
  flex-direction: column;
}

.group3 {
  display: flex;
  flex-direction: column;
}

input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

label {
  position: relative;
  margin-right: 1em;
  padding-left: 2em;
  padding-right: 1em;
  line-height: 2;
  cursor: pointer;
}
label:before {
  box-sizing: border-box;
  content: " ";
  position: absolute;
  top: 0.3em;
  left: 0;
  display: block;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid #15c39a;
  border-radius: 0.25em;
  z-index: -1;
}

input[type="radio"] + label::before {
  border-radius: 1em;
}

/* Checked */
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
  padding-left: 1em;
  color: #8e44ad;
  color: #fff;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  top: 0;
  width: 100%;
  height: 2em;
  background: #15c39a;
}

/* Transition */
label,
label::before {
  -webkit-transition: 0.25s all ease;
  -o-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="outer">
      <div class="wrapper">
        <h1>Pure CSS Fancy Checkbox/Radio</h1>

        <h2>Radio Buttons</h2>
        <div class="group">
          <input type="radio" name="rb" id="rb1" />
          <label for="rb1">Check this</label>
          <input type="radio" name="rb" id="rb2" />
          <label for="rb2">... or this...</label>
          <input type="radio" name="rb" id="rb3" />
          <label for="rb3">or maybe this</label>
        </div>

        <h2>Checkbox</h2>
        <div class="group">
          <input type="checkbox" name="cb" id="cb1" />
          <label for="cb1">Heart disease </label>
          <input type="checkbox" name="cb" id="cb2" />
          <label for="cb2">Anemia or other blood disease</label>
          <input type="checkbox" name="cb" id="cb3" />
          <label for="cb3">Severe headaches</label>
        </div>
        <div class="group">
          <input type="checkbox" name="q1" value="a" id="q1d" />
          <label for="q1d">Neck pain</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1e" />
          <label for="q1e">High cholesterol</label>
          <br />
          <input type="checkbox" name="q1" value="a" id="q1f" />
          <label for="q1f">Stomach disease</label>
        </div>
        <div class="group">
          <input type="checkbox" name="q1" value="a" id="q1g" />
          <label for="q1g">Stroke</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1h" />
          <label for="q1h">Sleep apnea</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1i" />
          <label for="q1i">Diabetes</label> <br />
        </div>
        <div class="group">
          <input type="checkbox" name="q1" value="a" id="q1j" />
          <label for="q1j">Cancer (past or present) </label><br />
          <input type="checkbox" name="q1" value="a" id="q1k" />
          <label for="q1k">Depression</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1l" />
          <label for="q1l">High blood pressure</label>
        </div>
        <div class="group">
          <input type="checkbox" name="q1" value="a" id="q1m" />
          <label for="q1m" class="radio-inline">Thyroid disease</label>
          <br />
          <input type="checkbox" name="q1" value="a" id="q1n" />
          <label for="q1n">Seizures</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1o" />
          <label for="q1o">Back pain</label> <br />
        </div>
        <div class="group">
          <input type="checkbox" name="q1" value="a" id="q1p" />
          <label for="q1p">Lung disease</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1q" />
          <label for="q1q">Kidney, bladder or prostate disease</label>
          <br />
          <input type="checkbox" name="q1" value="a" id="q1r" />
          <label for="q1r">Blood clots</label> <br />
        </div>
        <div class="newdiv">
          <div class="group1">
            <input type="checkbox" name="q1" value="a" id="q1j" />
            <label for="q1j">Cancer (past or present) </label><br />
            <input type="checkbox" name="q1" value="a" id="q1k" />
            <label for="q1k">Depression</label> <br />
            <input type="checkbox" name="q1" value="a" id="q1l" />
            <label for="q1l">High blood pressure</label>
          </div>
          <div class="group1">
            <input type="checkbox" name="q1" value="a" id="q1m" />
            <label for="q1m" class="radio-inline">Thyroid disease</label>
            <br />
            <input type="checkbox" name="q1" value="a" id="q1n" />
            <label for="q1n">Seizures</label> <br />
            <input type="checkbox" name="q1" value="a" id="q1o" />
            <label for="q1o">Back pain</label> <br />
          </div>
          <div class="group3">
            <input type="checkbox" name="q1" value="a" id="q1p" />
            <label for="q1p">Lung disease</label> <br />
            <input type="checkbox" name="q1" value="a" id="q1q" />
            <label for="q1q">Kidney, bladder or prostate disease</label>
            <br />
            <input type="checkbox" name="q1" value="a" id="q1r" />
            <label for="q1r">Blood clots</label> <br />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
0 голосов
/ 26 мая 2020

У вас проблема из-за вашего z-индекса.

В этом случае вы можете установить свой ярлык на z-index: 2;

Вот скриншот, так как вы, кажется, не получить тот же результат, что и я. enter image description here

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background:white;
  color: white;
}


.wrapper {
  padding: 20px;
  border: 2px solid #fff;
  border-radius: 5px;
  background: #8e44ad;
}

h1 {
  margin: 0 0 1em;
}

.group {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}

.newdiv {
  margin-top: 200px;
  display: flex;
  flex-direction: row;
}

.group1 {
  display: flex;
  flex-direction: column;
}

.group3 {
  display: flex;
  flex-direction: column;
}

input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

label {
  position: relative;
  margin-right: 1em;
  padding-left: 2em;
  padding-right: 1em;
  line-height: 2;
  cursor: pointer;
  z-index: 2;
}

label:before {
  box-sizing: border-box;
  content: " ";
  position: absolute;
  top: 0.3em;
  left: 0;
  display: block;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid white;
  border-radius: 0.25em;
  z-index: -1;
}

input[type="radio"] + label::before {
  border-radius: 1em;
}

/* Checked */
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
  padding-left: 1em;
  color: #8e44ad;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  top: 0;
  width: 100%;
  height: 2em;
  background: white;
}

/* Transition */
label,
label::before {
  -webkit-transition: 0.25s all ease;
  -o-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <h1>Pure CSS Fancy Checkbox/Radio</h1>

      <h2>Radio Buttons</h2>
      <div class="group">
        <input type="radio" name="rb" id="rb1" />
        <label for="rb1">Check this</label>
        <input type="radio" name="rb" id="rb2" />
        <label for="rb2">... or this...</label>
        <input type="radio" name="rb" id="rb3" />
        <label for="rb3">or maybe this</label>
      </div>

      <h2>Checkbox</h2>
      <div class="group">
        <input type="checkbox" name="cb" id="cb1" />
        <label for="cb1">Heart disease </label>
        <input type="checkbox" name="cb" id="cb2" />
        <label for="cb2">Anemia or other blood disease</label>
        <input type="checkbox" name="cb" id="cb3" />
        <label for="cb3">Severe headaches</label>
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1d" />
        <label for="q1d">Neck pain</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1e" />
        <label for="q1e">High cholesterol</label>
        <br />
        <input type="checkbox" name="q1" value="a" id="q1f" />
        <label for="q1f">Stomach disease</label>
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1g" />
        <label for="q1g">Stroke</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1h" />
        <label for="q1h">Sleep apnea</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1i" />
        <label for="q1i">Diabetes</label> <br />
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1j" />
        <label for="q1j">Cancer (past or present) </label><br />
        <input type="checkbox" name="q1" value="a" id="q1k" />
        <label for="q1k">Depression</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1l" />
        <label for="q1l">High blood pressure</label>
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1m" />
        <label for="q1m" class="radio-inline">Thyroid disease</label>
        <br />
        <input type="checkbox" name="q1" value="a" id="q1n" />
        <label for="q1n">Seizures</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1o" />
        <label for="q1o">Back pain</label> <br />
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1p" />
        <label for="q1p">Lung disease</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1q" />
        <label for="q1q">Kidney, bladder or prostate disease</label>
        <br />
        <input type="checkbox" name="q1" value="a" id="q1r" />
        <label for="q1r">Blood clots</label> <br />
      </div>
      <div class="newdiv">
        <div class="group1">
          <input type="checkbox" name="q1" value="a" id="q1j" />
          <label for="q1j">Cancer (past or present) </label><br />
          <input type="checkbox" name="q1" value="a" id="q1k" />
          <label for="q1k">Depression</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1l" />
          <label for="q1l">High blood pressure</label>
        </div>
        <div class="group1">
          <input type="checkbox" name="q1" value="a" id="q1m" />
          <label for="q1m" class="radio-inline">Thyroid disease</label>
          <br />
          <input type="checkbox" name="q1" value="a" id="q1n" />
          <label for="q1n">Seizures</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1o" />
          <label for="q1o">Back pain</label> <br />
        </div>
        <div class="group3">
          <input type="checkbox" name="q1" value="a" id="q1p" />
          <label for="q1p">Lung disease</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1q" />
          <label for="q1q">Kidney, bladder or prostate disease</label>
          <br />
          <input type="checkbox" name="q1" value="a" id="q1r" />
          <label for="q1r">Blood clots</label> <br />
        </div>
      </div>
    </div>
  </body>
</html>
0 голосов
/ 26 мая 2020

Переместите свойство margin из .wrapper в body и измените его на padding. Затем переместите свойство фона из body в .wrapper и дайте .wrapper небольшой запас.

Изменения: 

body{
   /* Remove background: #8e44ad;*/
   /* Add padding: 50px 20px 50px 20px;*/
}

.wrapper {
   /* Remove margin: 50px 20px 50px 20px; */
   /* Add background: #8e44ad; */
   /* Add padding: 20px; */
}


body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: white;
  padding: 50px 20px 50px 20px;
}

body:not(.wrapper.group) {
 /* background: white;*/
}

.wrapper {
  background: #8e44ad;
  padding: 20px;

/* background-color: chartreuse; */
  border: 2px solid #fff;
  border-radius: 5px;
    /* background: #8e44ad;
    color: white; */
}

h1 {
  margin: 0 0 1em;
}

.group {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}

.newdiv {
  margin-top: 200px;
  display: flex;
  flex-direction: row;
}

.group1 {
  display: flex;
  flex-direction: column;
}

.group3 {
  display: flex;
  flex-direction: column;
}

input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

label {
  position: relative;
  margin-right: 1em;
  padding-left: 2em;
  padding-right: 1em;
  line-height: 2;
  cursor: pointer;
}
label:before {
  box-sizing: border-box;
  content: " ";
  position: absolute;
  top: 0.3em;
  left: 0;
  display: block;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid white;
  border-radius: 0.25em;
  z-index: -1;
}

input[type="radio"] + label::before {
  border-radius: 1em;
}

/* Checked */
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
  padding-left: 1em;
  color: #8e44ad;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  top: 0;
  width: 100%;
  height: 2em;
  background: white;
}

/* Transition */
label,
label::before {
  -webkit-transition: 0.25s all ease;
  -o-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
    <div class="wrapper">
      <h1>Pure CSS Fancy Checkbox/Radio</h1>

      <h2>Radio Buttons</h2>
      <div class="group">
        <input type="radio" name="rb" id="rb1" />
        <label for="rb1">Check this</label>
        <input type="radio" name="rb" id="rb2" />
        <label for="rb2">... or this...</label>
        <input type="radio" name="rb" id="rb3" />
        <label for="rb3">or maybe this</label>
      </div>

      <h2>Checkbox</h2>
      <div class="group">
        <input type="checkbox" name="cb" id="cb1" />
        <label for="cb1">Heart disease </label>
        <input type="checkbox" name="cb" id="cb2" />
        <label for="cb2">Anemia or other blood disease</label>
        <input type="checkbox" name="cb" id="cb3" />
        <label for="cb3">Severe headaches</label>
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1d" />
        <label for="q1d">Neck pain</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1e" />
        <label for="q1e">High cholesterol</label>
        <br />
        <input type="checkbox" name="q1" value="a" id="q1f" />
        <label for="q1f">Stomach disease</label>
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1g" />
        <label for="q1g">Stroke</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1h" />
        <label for="q1h">Sleep apnea</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1i" />
        <label for="q1i">Diabetes</label> <br />
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1j" />
        <label for="q1j">Cancer (past or present) </label><br />
        <input type="checkbox" name="q1" value="a" id="q1k" />
        <label for="q1k">Depression</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1l" />
        <label for="q1l">High blood pressure</label>
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1m" />
        <label for="q1m" class="radio-inline">Thyroid disease</label>
        <br />
        <input type="checkbox" name="q1" value="a" id="q1n" />
        <label for="q1n">Seizures</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1o" />
        <label for="q1o">Back pain</label> <br />
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1p" />
        <label for="q1p">Lung disease</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1q" />
        <label for="q1q">Kidney, bladder or prostate disease</label>
        <br />
        <input type="checkbox" name="q1" value="a" id="q1r" />
        <label for="q1r">Blood clots</label> <br />
      </div>
      <div class="newdiv">
        <div class="group1">
          <input type="checkbox" name="q1" value="a" id="q1j" />
          <label for="q1j">Cancer (past or present) </label><br />
          <input type="checkbox" name="q1" value="a" id="q1k" />
          <label for="q1k">Depression</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1l" />
          <label for="q1l">High blood pressure</label>
        </div>
        <div class="group1">
          <input type="checkbox" name="q1" value="a" id="q1m" />
          <label for="q1m" class="radio-inline">Thyroid disease</label>
          <br />
          <input type="checkbox" name="q1" value="a" id="q1n" />
          <label for="q1n">Seizures</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1o" />
          <label for="q1o">Back pain</label> <br />
        </div>
        <div class="group3">
          <input type="checkbox" name="q1" value="a" id="q1p" />
          <label for="q1p">Lung disease</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1q" />
          <label for="q1q">Kidney, bladder or prostate disease</label>
          <br />
          <input type="checkbox" name="q1" value="a" id="q1r" />
          <label for="q1r">Blood clots</label> <br />
        </div>
      </div>
    </div>
0 голосов
/ 26 мая 2020

Элемент .wrapper по умолчанию имеет прозрачный фон, поэтому он кажется фиолетовым.

Попробуйте установить цвет фона, который подходит вашему дизайну.

...