Как реализовать срабатывания css стиля при клике на радио боттон?

Question

[Антон Вебсайтовский]

Здравствуйте, на сайте есть радио кнопки, кнопка обернута в стиль, как при клике на радио кнопку чтобы рамка стиля кнопки менялась?

стиль во что обернута кнопка:

.minifotocloth { 
border: 1px solid #EDEDED;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 171.5px; 
height: 142px;
overflow: hidden;
margin-right: 15px;
margin-bottom: 15px;
float: left;
display: inline-block;
transition: opacity 0.3s ease 0s;
transition-property: opacity;
transition-duration: 0.5s, 0.5s;
transition-timing-function: ease, ease;
transition-delay: 0s, 0s;
text-align: center;
 }

кнопка:

input[type=radio].css-checkbox {
display:none;
}
input[type=radio].css-checkbox + label.css-label {
margin-top: -4px;
padding-left:40px;
height:24px; 
display:inline-block;
line-height:24px;
background-repeat:no-repeat;
background-position: 0 0;
vertical-align:middle;
cursor:pointer;
font-size: 14px;
}
input[type=radio].css-checkbox:checked + label.css-label {
background-position: 0 -24px;
}
label.css-label {
background-image:url(/media/i/csscheckbox.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

Как при клике на радио кнопку, чтобы стиль бордера у стиля .minifotocloth менялся на другой цвет.
Выходит так что я нажимаю на кнопку радио, она выделяется видно что поставили галочку, а так же хочу чтобы стиль .minifotocloth в который обернута кнопка, менял цвет бордера.

Answer 1

[sim3x]

:focus
:active

Comments

[Антон Вебсайтовский]

Не совсем вас понял, приведите пример.

[sbh]

Антон Вебсайтовский: опишите разные стили для разных состояний. Примеры состояний вам выше привели. Google поможет 100% если там написать css :focus

[Антон Вебсайтовский]

Вы наверное не поняли меня, если поставить галочку на радио кнопку нужно чтобы по мимо этого срабатывал стиль в который обернута кнопка радио, чтобы бордер менял цвет.

[Антон Вебсайтовский]

sbh: Вы про это
.minifotocloth:active{
border: 1px solid #202020;
}
.minifotocloth:focus{
border: 1px solid #202020;
}

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

[sbh]

Антон Вебсайтовский: ясно. на будущее - описывайте вопрос более подробно.

[Антон Вебсайтовский]

sbh: Я старался и вроде бы описал все что требуется, видимо плохо раз не поняли меня.

[Григорий]

Антон Вебсайтовский: только через JS или jQuery. CSS не обрабатывает события нажатия, насколько мне известно.

[sim3x]

Антон Вебсайтовский:
>как при клике на радио кнопку

стоит поправить вопрос, если нужно отметить елемент в состоянии https://developer.mozilla.org/en-US/docs/Web/CSS/%...

[Антон Вебсайтовский]

Чет я поглазел и ничего не понял.

[sim3x]

Антон Вебсайтовский:

input:checked {
margin-left: 25px;
border: 1px solid blue;
}

Answer 2

[Максим]

Нужно использовать label, связывать его по id с radio, сам radio прятать. Щелкать будем по label, он будет передавать на radio, работать будет. А label стилизуем как угодно, например:
Делаем необходимую разметку:

<div>
    <input id="first" type="radio" name="first" value="first">
    <label for="first">надпись</label>
    <input id="second" type="radio" name="second" value="second">
    <label for="second">надпись</label>
</div>

В стилях пишем:
Прячем брутальные переключатели

input[type=radio] {
    display: none;
}

label стилизуем как угодно, можно сделать рамку, стили будут применяться к тексту "надпись". Если надо галочку или точку (вместо стандартного переключателя), стилизуем псевдоэлемент :before.

Comments

[Антон Вебсайтовский]

приведите пожалуйста пример. пока не понимаю.

[Максим]

Антон Вебсайтовский: редактировал ответ