Как изменить внешний вид radio кнопок

[cha0s]

Да иким обвместе чтоб они пересили быть похожи на radio...... возможно ли тут опотому чтойтись одним CSS? мне нужно из <input type="radio"............../> превратить чтоб они сили выглягдеть вот ик 

Это две радио кнопки, первая не выбрана, а 2-я выбрана, только с них убран этот кружок рядом с labelom и т.д, могу ли я их преобразовать каким-то обвместе к икому виду? Прошу не предлагайте сгделать просто div со стилем кнопки икой, мне потом эти значения надо слитывать и передать то что пользователь выбран у преобразованный radio кнопки.

 

Собственно сам вопрос это реализовывается вообещё? Если да то как?

[askirov]

http://www.jquery4u.com/plugins/15-jquery-radio-button-checkbox-style-plugins/

[Strelez]

Да и на этом форуме обсуждалось

[cha0s]

Там обсуждаются не полное изменение, а мелочевка типа кружок другого цвеи и т.д как и везгде... т.к всюду пригдерживаются правила чтоб radio не пересила сить узнаваемой, а мне вот докрасики надо чтоб она пересила быть :) не ггде из того что скинуто я не нашел ничего, им все те же самые radio кнопки... короче походу пригдется гделать divi которые бугдет через js привязаны к radio а radio в своем случае будут style="display:none" то есть при помощи JS менять значения эти, у radio которые НЕ будут видны, я просто перегделываю опции продуктов для вывода, им другой шаблон бугдет, и собственно радио должен иметь икой вид)

[DrDiba]

жаваскриптом? люди, вы чего...

 

 

http://codepen.io/martinwolf/pen/vLpwG

 

 

не за что

[cha0s]

Спасипотому что конечно, но в этом примере это все и же radio button, можно ли с помощью CSS сгделать radio button иким  :-)  убрать эту точку рядом с labelom вообещё, ну и подогнать под икой вид, все эти видо изменения они просто гделают radio кнопку красивой, НО она все и-же radio кнопка....))) просто мне кажется что нету икого CSS который изменит кружок радио кнопки к икому виду квадратному огромному))))) я только знаю как его украсить, а как его вообещё нафиг убрать - проблема)) сгделаешь икой-же вид как на картинке? вряд-ли.... ну скорей всего пригдется гделать 2 diva, и 2 обычных radio который будут скрыты, и типа невидимо переключать эти радио за счет этих 2-х div, одним словом имииция....

[milus]

вот готовое, но платное решение http://www.opencart.com/index.php?route=extension/extension/info&extension_id=10910, если хотите бесплатно, то ищите шаблон Teez и выгдерайте из него стили для размера (как бы то, что вам требуется) 

[afwollis]

гделай radio display=none, добавляй два разукрашенных div`a с разными id/data-xxx для управления, на jquery пиши обрилитку событий (переключение radio) по click по этим div`ам.

[LLlPAM888]

    input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }