CSS JS PHP XYZ

Все, что вы хотели знать о программизме, но боялись спросить.
Аватара пользователя
mikei
Графоман
Сообщения: 46488
Зарегистрирован: 27 мар 2010, 23:37
Откуда: Burnaby, BC

CSS JS PHP XYZ

Сообщение mikei »

Заголовок, чтобы по каждому члучаю темы не плодить.

Как только CSSом выбрать вот такой элемент <label>?

Код: Выделить всё

<div class="wrap">
<div class="wrap-input>
<input>
</div>
<label>
</div>
Если бы не было HTML <div class="wrap-input></div> то я бы делал так

Код: Выделить всё

.wrap input + label {
}
Но с завернутым инпутом так не знаю как. Если никак, то я эту завертку убрал джаваскриптом, но кривовато, потому что она малтипл. Если CSS никак, то следующий вопрос будет JS
Аватара пользователя
LeoV
Графоман
Сообщения: 14497
Зарегистрирован: 02 июн 2012, 15:41
Откуда: Графство O'Mан
Контактная информация:

Re: CSS JS PHP XYZ

Сообщение LeoV »

Аватара пользователя
mikei
Графоман
Сообщения: 46488
Зарегистрирован: 27 мар 2010, 23:37
Откуда: Burnaby, BC

Re: CSS JS PHP XYZ

Сообщение mikei »

Спасибо, очень близко. Но так я пробовал. > не совсем то (с) pin :)
Какая-то более хитрая комбинация должна быть. Попробую ещё, доложу :)
Аватара пользователя
mikei
Графоман
Сообщения: 46488
Зарегистрирован: 27 мар 2010, 23:37
Откуда: Burnaby, BC

Re: CSS JS PHP XYZ

Сообщение mikei »

Нет. Посмотрел внимательно, там простой случай.
Уточняю. Мне надо выбрать и инпут и лэйбл при условии, когда input:checked
Могу показать это живьём, чтобы инспектором посмотреть.
Аватара пользователя
levak
Графоман
Сообщения: 23240
Зарегистрирован: 15 июл 2009, 15:42
Откуда: Москва, Франкфурт, Ричмонд.

Re: CSS JS PHP XYZ

Сообщение levak »

Изображение
ura
Житель
Сообщения: 914
Зарегистрирован: 09 мар 2003, 22:46

Re: CSS JS PHP XYZ

Сообщение ura »

mikei писал(а): 13 ноя 2020, 13:25 Заголовок, чтобы по каждому члучаю темы не плодить.

Как только CSSом выбрать вот такой элемент <label>?

Код: Выделить всё


<html>
<head>

<style>
    .wrap { font-size: 20px; }
    .wrap-input { font-size: 40px; }
    .wrap label { font-size: 60px; font-weight: bold; }
</style>

</head>

<body>
    <div class="wrap">
        HELLO
        <div class="wrap-input">
            <input type="text" value="world"/>
        </div>
        <label>OF PAIN</label>
    </div>

    <label>The end</label>
</body>

</html>

Seems working
Аватара пользователя
mikei
Графоман
Сообщения: 46488
Зарегистрирован: 27 мар 2010, 23:37
Откуда: Burnaby, BC

Re: CSS JS PHP XYZ

Сообщение mikei »

ura писал(а): 13 ноя 2020, 21:55
mikei писал(а): 13 ноя 2020, 13:25 Заголовок, чтобы по каждому члучаю темы не плодить.

Как только CSSом выбрать вот такой элемент <label>?

Код: Выделить всё


<html>
<head>

<style>
    .wrap { font-size: 20px; }
    .wrap-input { font-size: 40px; }
    .wrap label { font-size: 60px; font-weight: bold; }
</style>

</head>

<body>
    <div class="wrap">
        HELLO
        <div class="wrap-input">
            <input type="text" value="world"/>
        </div>
        <label>OF PAIN</label>
    </div>

    <label>The end</label>
</body>

</html>

Seems working
Не. ТЗ может быть не понятно сформулировано, но не всё так просто. Сделаю вижуалс :) без джаваскрипта скорее никак.
ura
Житель
Сообщения: 914
Зарегистрирован: 09 мар 2003, 22:46

Re: CSS JS PHP XYZ

Сообщение ura »

Поправь мой пример и покажи что не работает, я скажу как исправить.
Аватара пользователя
mikei
Графоман
Сообщения: 46488
Зарегистрирован: 27 мар 2010, 23:37
Откуда: Burnaby, BC

Re: CSS JS PHP XYZ

Сообщение mikei »

ura писал(а): 14 ноя 2020, 07:36 Поправь мой пример и покажи что не работает, я скажу как исправить.
Вот же, я уточнил
mikei писал(а): 13 ноя 2020, 14:38 Уточняю. Мне надо выбрать и инпут и лэйбл при условии, когда input:checked
Target label when input:checked. Покажу через пару часов. Там ещё сложнее, это я ещё упростил для себя html, насколько был доступ к нему. В оригинальном html input завернут в label.
Аватара пользователя
mikei
Графоман
Сообщения: 46488
Зарегистрирован: 27 мар 2010, 23:37
Откуда: Burnaby, BC

Re: CSS JS PHP XYZ

Сообщение mikei »

ura писал(а): 14 ноя 2020, 07:36 Поправь мой пример и покажи что не работает, я скажу как исправить.
Ura :)
https://presstype.net/ura/
Mikei :)
https://presstype.net/mikei/

Нижний ряд на чек меняет лэйблу цвет. Но JS. Как без? Здесь JS только для того, чтобы убрать мешающий див.
В идеале бы так сделать оргинальному HTMLу - первый ряд.
ura
Житель
Сообщения: 914
Зарегистрирован: 09 мар 2003, 22:46

Re: CSS JS PHP XYZ

Сообщение ura »

Then the +label option suggested before is correct.

Код: Выделить всё

<html>
<head>

<style>
    .wrap { font-size: 20px; }
    .wrap-input { font-size: 40px; }
    .wrap-input input+label 
    {
        font-weight: bold; color: blue;
    }
    .wrap-input input:checked+label 
    {
        font-weight: bold; color: gray;
    }
</style>

</head>

<body>
    <div class="wrap">
        HELLO WORLD
        <div class="wrap-input">
            <input type="checkbox" id="cb1"/>
            <label for="cb1">OF CSS PAIN</label>

            <input type="checkbox"/ id="cb2">
            <label for="cb2">OR CSS PLEASURE</label>
        </div>
        <label>The choice is yours.</label>
    </div>
</body>
    
</html>

Аватара пользователя
mikei
Графоман
Сообщения: 46488
Зарегистрирован: 27 мар 2010, 23:37
Откуда: Burnaby, BC

Re: CSS JS PHP XYZ

Сообщение mikei »

ura писал(а): 14 ноя 2020, 15:46 Then the +label option suggested before is correct.

Код: Выделить всё

<html>
<head>

<style>
    .wrap { font-size: 20px; }
    .wrap-input { font-size: 40px; }
    .wrap-input input+label 
    {
        font-weight: bold; color: blue;
    }
    .wrap-input input:checked+label 
    {
        font-weight: bold; color: gray;
    }
</style>

</head>

<body>
    <div class="wrap">
        HELLO WORLD
        <div class="wrap-input">
            <input type="checkbox" id="cb1"/>
            <label for="cb1">OF CSS PAIN</label>

            <input type="checkbox"/ id="cb2">
            <label for="cb2">OR CSS PLEASURE</label>
        </div>
        <label>The choice is yours.</label>
    </div>
</body>
    
</html>

Добавил туда же вариант собственно вопроса. Когда <div>input</div>label то эта схема перестает работать. Как div пропустить css-ом только? Мне очень нежелательно избавляться от него в htmle.
Казалось бы просто, а что-то не догоняю или невозможно.
ura
Житель
Сообщения: 914
Зарегистрирован: 09 мар 2003, 22:46

Re: CSS JS PHP XYZ

Сообщение ura »

Тогда через javascript. Или надо понять зачем таки нужен div.
Аватара пользователя
mikei
Графоман
Сообщения: 46488
Зарегистрирован: 27 мар 2010, 23:37
Откуда: Burnaby, BC

Re: CSS JS PHP XYZ

Сообщение mikei »

ura писал(а): 14 ноя 2020, 21:39 Тогда через javascript. Или надо понять зачем таки нужен div.
это очень крутой плагин FormidablePro там много для чего может быть наставлено. Например, можно чекбоксики на картиночки заменить. А мне надо на кнопачки заменить. Значит никак :( А я думал я самый крутой сиэсэшник каморки :D Ну тогда по тупому джаваскриптом. Тогда просто класс туда зааппендить на чек и даже с эчтиэмелом не надо мухлевать.
ura
Житель
Сообщения: 914
Зарегистрирован: 09 мар 2003, 22:46

Re: CSS JS PHP XYZ

Сообщение ura »

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