Как изменить внешний вид 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;
    }