我正在嘗試使用html和css使用顏色面板制作改變顏色的背景-有解無憂

我正在嘗試使用 html 和 css 使用顏色面板制作改變顏色的背景

嗨，我正在嘗試制作一個更改背景顏色的面板，當您單擊特定顏色時，背景應相應更改。我設法在：target 的幫助下對面板進行了編碼，但我在背景更改方面遇到了困難。我嘗試使用 :focus、:checked 和一些偽類，但我無法讓它作業。我不允許使用 JS。

HTML 正文

<div class="shoe-background">
        <div id="niketext">NIKE</div>
    </div>
    <div class="textpanel">
        <div id="header">
            <div id="title">Nike Zoom KD 12</div>
            <div class="button">NEW</div>
            <div style="font-size:15px;font-weight:300;">Men's Running Shoes</div>
            <br>
            <div style="font-size:20px;font-weight:500">Product Info</div>
            <div style="font-size:13px;font-weight:300">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis distinctio odit praesentium tempora commodi ea iusto veniam fuga minima, tenetur sequi voluptatibus voluptas id! Minima perferendis voluptatibus sint molestias quisquam!</div>
            <br>
            <div style="font-size:20px;font-weight:500">Color</div>
            <div class="colors-selector">
                <a href="#red" class="picker" id="red"></a>     //I am using :target  for color select effect
                <a href="#green" class="picker" id="green"></a>
                <a href="#blue" class="picker" id="blue"></a>
                <a href="#orange" class="picker" id="orange"></a>
                <a href="#gray" class="picker" id="gray"></a>
            </div>
        </div>
    </div>

我一直在努力使用 CSS，嘗試過這樣的事情：

.colors-selector a#red:focus .shoe-background{
      background: red;
}

.colors-selector a#red:focus ~.shoe-background{
      background: red;
}

.picker ~.shoe-background{
      background: red;
}

#red:target .shoe-background{
    background:red;
}
//and so on...

但我不能讓它作業，我知道這是一個父子兄弟說明符的問題，但我確實知道要搜索什么才能掌握這個問題。任何幫助表示贊賞！

uj5u.com熱心網友回復：

如果您將“背景”設定在實際選擇器的下方以選擇顏色，這將是可以實作的。下面我包裝你的顏色選擇器和耐克，并在 html 結構上反轉它。之后，我使用 display flex 反轉它，方向行反轉。之后，您通常可以像下面這樣使用它

/*
.colors-selector a#red:focus .shoe-background{
      background: red;
}

.colors-selector a#red:focus ~.shoe-background{
      background: red;
}

.picker ~.shoe-background{
      background: red;
}


#red:target .shoe-background{
    background:red;
}
*/

/* answer */

.colors-selector a#red:focus ~.shoe-background{
      background: red;
}
.textpanel:has([name="color"][value="red"]:checked) ~ .shoe-background{
  background:red
}
.textpanel:has([name="color"][value="green"]:checked) ~ .shoe-background{
  background:green
}
.textpanel:has([name="color"][value="blue"]:checked) ~ .shoe-background{
  background:blue
}
.textpanel:has([name="color"][value="orange"]:checked) ~ .shoe-background{
  background:orange
}
.textpanel:has([name="color"][value="gray"]:checked) ~ .shoe-background{
  background:gray
}
/* Helper */
.card-container{
   display:flex; flex-direction:row-reverse;
}

[value="red"] {
    background: red;
  }
  [value="blue"] {
    background: blue;
  }
  [value="green"] {
    background: green;
  }
  [value="orange"] {
    background: Orange;
  }
  [value="gray"] {
    background: gray;
  }
    input {
    margin: 0 10px;
    appearance: none;
    border: 2px solid;
    border-radius: 50%;
    height: 40px;
    min-height: 40px;
    width: 40px;
    min-width: 40px;
  }

  input:checked {
    border: 6px solid white;
    outline: 1px solid;
  }

<div class="card-container">
  
  <div class="textpanel">
      <div id="header">
          <div id="title">Nike Zoom KD 12</div>
          <div class="button">NEW</div>
          <div style="font-size:15px;font-weight:300;">Men's Running Shoes</div>
          <br>
          <div style="font-size:20px;font-weight:500">Product Info</div>
          <div style="font-size:13px;font-weight:300">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis distinctio odit praesentium tempora commodi ea iusto veniam fuga minima, tenetur sequi voluptatibus voluptas id! Minima perferendis voluptatibus sint molestias quisquam!</div>
          <br>
          <div style="font-size:20px;font-weight:500">Color</div>
          <div class="colors-selector">
              <input type="radio" checked value="red" name="color"> red
              <input type="radio" value="green" name="color"> green
              <input type="radio" value="blue" name="color"> blue
              <input type="radio" value="orange" name="color"> orange
              <input type="radio" value="gray" name="color"> gray
          </div>
      </div>
  </div>
  <div class="shoe-background">
      <div id="niketext">NIKE</div>
  </div>
</div>

uj5u.com熱心網友回復：

如果你稍微改變你的 HTML，把顏色選擇器放在 NIKE 元素之前，那么它可以用 CSS 來完成。

您需要顏色選擇器在流程中處于領先地位，以便它們可以影響 NIKE 元素的背景顏色。

此片段將選擇器作為單選按鈕都在同一組中（由它們的 name 屬性定義），因此一次只能選擇一個。

我沒有復制你所有的樣式，因為它不在問題中，顯然你會想要玩弄輸入的格式和樣式。

定位是通過一個 6 列的網格完成的。第一個是容器寬度的一半，接下來的 5 個平均占用剩下的一半。這是為了讓您的 5 個選擇器每個都在一個列中。

其余文本占據網格中的最后 5 列和第一行。采摘者下半場占據第二排。

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 3px;
  background-clip: content-box;
  border: 1px solid var(--c);
  background-color: var(--c);
  border-radius: 50%;
}

input[type="radio"]:checked {
  padding: 0;
  width: 20px;
  height: 20px;
}

.shoe-background {
  display: grid;
  grid-template-columns: 5fr repeat(5, 1fr);
  grid-template-rows: 1fr 1fr;
  /* for demo */
  width: 500px;
  height: 500px;
  border: 2px solid black;
}

.picker {
  grid-row: 2;
  width: 25%;
}

#red {
  accent-color: red;
  grid-column: 2;
  --c: red;
}

#green {
  accent-color: green;
  grid-column: 3;
  --c: green;
}

#blue {
  accent-color: blue;
  grid-column: 4;
  --c: blue;
}

#orange {
  accent-color: orange;
  grid-column: 5;
  --c: orange;
}

#gray {
  grid-column: 6;
  --c: gray;
}

#red:checked~#niketext {
  background: red;
}

#green:checked~#niketext {
  background: green;
}

#blue:checked~#niketext {
  background: blue;
}

#yellow:checked~#niketext {
  background: yellow;
}

#gray:checked~#niketext {
  background: gray;
}

#niketext {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.textpanel {
  grid-column: 2 / span 5;
  grid-row: 1;
}

</style><style>input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 3px;
  background-clip: content-box;
  border: 1px solid var(--c);
  background-color: var(--c);
  border-radius: 50%;
}

input[type="radio"]:checked {
  padding: 0;
  width: 20px;
  height: 20px;
}

.shoe-background {
  display: grid;
  grid-template-columns: 5fr repeat(5, 1fr);
  grid-template-rows: 1fr 1fr;
  /* for demo */
  width: 500px;
  height: 500px;
  border: 2px solid black;
}

.picker {
  grid-row: 2;
  width: 25%;
}

#red {
  accent-color: red;
  grid-column: 2;
  --c: red;
}

#green {
  accent-color: green;
  grid-column: 3;
  --c: green;
}

#blue {
  accent-color: blue;
  grid-column: 4;
  --c: blue;
}

#orange {
  accent-color: orange;
  grid-column: 5;
  --c: orange;
}

#gray {
  grid-column: 6;
  --c: gray;
}

#red:checked~#niketext {
  background: red;
}

#green:checked~#niketext {
  background: green;
}

#blue:checked~#niketext {
  background: blue;
}

#yellow:checked~#niketext {
  background: yellow;
}

#gray:checked~#niketext {
  background: gray;
}

#niketext {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.textpanel {
  grid-column: 2 / span 5;
  grid-row: 1;
}

<div class="shoe-background">

  <input type="radio" class="picker" id="red" name="color">
  <input type="radio" class="picker" id="green" name="color">
  <input type="radio" class="picker" id="blue" name="color">
  <input type="radio" class="picker" id="orange" name="color">
  <input type="radio" class="picker" id="gray" name="color">

  <div id="niketext">NIKE</div>

  <div class="textpanel">
    <div id="title">Nike Zoom KD 12</div>
    <div class="button">NEW</div>
    <div style="font-size:15px;font-weight:300;">Men's Running Shoes</div>
    <br>
    <div style="font-size:20px;font-weight:500">Product Info</div>
    <div style="font-size:13px;font-weight:300">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis distinctio odit praesentium tempora commodi ea iusto veniam fuga minima, tenetur sequi voluptatibus voluptas id! Minima perferendis voluptatibus sint molestias quisquam!</div>
    <div style="font-size:20px;font-weight:500" id="color">Color</div>

  </div>
</div>

uj5u.com熱心網友回復：

1-使用您的 HTML 結構，我認為僅使用 CSS 是不可能的。

我做了一個新的 HTML 結構，它只有在輸入和背景元素在一個容器中時才有效。此外，背景元素應該在輸入之后。我不明白為什么，希望有專家能幫助我理解。

2- 如果您不考慮回應性，僅使用 CSS 執行此操作很容易。

但是如果你想要回應式設計，這有點困難，需要很多考慮。

我試圖讓它在這里回應。但它只適用于桌面。

* {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: row-reverse;
    height: 80vh;
    width: 80vw;
    padding: 10px 20px;
    margin: auto;
    align-items: center;
    background-color: lightgray;
    position: relative;
}

.text {
    position: absolute;
    top: 5%;
    right: 10%;
}

.text :nth-child(n){
    margin: 10px 0;
}

.bg {
    background-color: gray;
    height: 50%;
    width: 50%;
    max-width: 400px;
    min-width: 300px;
    margin: 20px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    font-family: Arial, Helvetica, sans-serif;
  }

  input {
    margin: 0 10px;
    appearance: none;
    border: 2px solid;
    border-radius: 50%;
    height: 30px;
    min-height: 30px;
    width: 30px;
    min-width: 30px;
  }

  input:checked {
    border: 6px solid white;
    outline: 1px solid;
  }

  .black {
    background: black;
  }
  .blue {
    background: blue;
  }
  .green {
    background: green;
  }
  .orange {
    background: Orange;
  }

  input[value="black"]:checked ~ .bg {
    background-color: black;
  }
  input[value="blue"]:checked ~ .bg {
    background-color: blue;
  }
  input[value="green"]:checked ~ .bg {
    background-color: green;
  }
  input[value="orange"]:checked ~ .bg {
    background-color: orange;
  }

<div class="container">

    <div class="text">
        <h1 class="headline">headline</h1>
        <p class="details">details</p>
    </div>
    <input class="black" type="radio" value="black" name="color">
    <input class="blue" type="radio" value="blue" name="color">
    <input class="green" type="radio" value="green" name="color">
    <input class="orange" type="radio" value="orange" name="color">
    <div class="bg">NIKE</div>

</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/524496.html

標籤：htmlcss用户界面

上一篇：Java列印“？”而不是東西

下一篇：InnoSetup-添加4個許可頁面