Смена цвета блока

@shanomercury · Регистрация: 19.10.2016

Author24 — интернет-сервис помощи студентам

Всем привет
Нужна помощь.

Есть вот такие 3 блока:

HTML5

<label class="col-lg-4 col-md-12">
   <div class="postbl" style="text-align: center">
      <input name="type" type="radio" value="album" style="visibility: hidden;"
     <div class="card-body" style="padding-bottom: 10px;padding-left: 10px;padding-top: 10px;padding-right: 10px;">
                                        <h2 class="card-title">Иконка</icon></h2>
                                        <h4 class="card-text">Блок пример    </h4>
     </div>
   </div>
</label>

CSS

.postbl {
    position: relative;
    margin-bottom: 1.5rem;
    width: 100%;
    border-radius: 12px;
    color: #fff !important;
    background-color: #53127F !important;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid #efefff;
    box-shadow: 0 16px 26px 0 rgb(239, 239, 255, 0.7);
}

Необходимо чтобы div класс "postbl" менял свой цвет бэкграунда

Прошу помочь. Как только не пытался это сделать. Не получается и всё...

Спасибо заранее!

Добавлено через 2 часа 30 минут
Менял свой цвет когда на него нажимаешь!))
Не дописал.

@Brokolya · 28.03.2019, 19:43

при нажатии должен цвет менять или что?

@shanomercury · 28.03.2019, 21:16 **[ТС]**

Brokolya
Да, есть 3 блока. И нужно чтобы при выборе одного он менял цвет, при выборе другого из 3, другой менял

@Freeze_Breeze · 30.03.2019, 11:52

shanomercury, мне когда то показали такой метод, попробуйте может у Вы что то придумаете:
Code Pen

HTML5

<div class="tabs-widget">
  <input class="tab-trigger" type="radio" id="tab-1-1" name="radio" checked="checked"/>
  <label for="tab-1-1">TAB1</label>
  <input class="tab-trigger" type="radio" id="tab-1-2" name="radio"/>
  <label for="tab-1-2">TAB2</label>
  <input class="tab-trigger" type="radio" id="tab-1-3" name="radio"/>
  <label for="tab-1-3">TAB3</label>
  <div class="scroller" id="tab_1_1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi recusandae error corrupti molestias tenetur obcaecati a? Saepe magnam animi iure harum quibusdam unde sit reprehenderit accusamus dolorum, quo quis quidem?</div>
  <div class="scroller" id="tab_1_2">Loremのイプサムのニンジンは、リベートを強化します。誤って受け入れた場合面倒バウンド盲目になりますか？心の中で、これらの偉大な悲しみの一部を非難する権利、多くの場合、男性は全く不明である何の事、彼がどこから来るかで障害を見つけますか？</div>
  <div class="scroller" id="tab_1_3">Lorem ipsum गाजर बढ़ाया छूट। अगर गलती से स्वीकार कर लिया परेशानी बाध्य अंधा हो गए हैं? मन की है, है ना इन महान दु: ख में से कुछ का आरोप लगा है, अक्सर जहां वह, से आता है क्या बातें एक आदमी पूरी तरह अनजान हैं के साथ गलती खोजने के?</div>
</div>

CSS

.tabs-widget{text-align:center}
.tab-trigger{position:absolute;clip:rect(0, 0, 0, 0)}
label{margin:0 20px;cursor:pointer}
label:hover{background:gray}
.scroller{height:300px;width:400px;border:1px solid black;margin:10px auto;display:none}
#tab-1-1:checked ~ #tab_1_1, #tab-1-2:checked ~ #tab_1_2,#tab-1-3:checked ~ #tab_1_3{display:block}
#tab-1-1:checked ~ label[for='tab-1-1'], #tab-1-2:checked ~ label[for='tab-1-2'],#tab-1-3:checked ~ label[for='tab-1-3']{background:#000;color:#fff}

@Brokolya 21 / 14 / 5 Регистрация: 17.09.2016 Сообщений: 104
	28.03.2019, 19:43	2
	при нажатии должен цвет менять или что? 0

@shanomercury 0 / 0 / 0 Регистрация: 19.10.2016 Сообщений: 17
	28.03.2019, 21:16 [ТС]	3
	Brokolya Да, есть 3 блока. И нужно чтобы при выборе одного он менял цвет, при выборе другого из 3, другой менял 0

	30.03.2019, 11:52