Текст под radio кнопкой

Тема в разделе "Верстка", создана пользователем gamera, 9 июн 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. gamera

    gamera Постоялец

    Регистр.:
    15 мар 2010
    Сообщения:
    117
    Симпатии:
    6
    Всем привет, нашел на одном из сайтов кастомный радио бокс который мне больше всех подходит, но вот задача как сделать чтобы радио бокс был над текстом, пробовал делать display: block Никакого результата, вот прикладываю html и css этого радио бокса
    Css:
    Код:
    input[type=radio].css-checkbox {
                                position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
                            }
    
                            input[type=radio].css-checkbox + label.css-label {
                                padding-left:23px;
                                height:18px;
                                display:inline-block;
                                line-height:18px;
                                background-repeat:no-repeat;
                                background-position: 0 0;
                                font-size:18px;
                                vertical-align:middle;
                                cursor:pointer;
    
                            }
    
                            input[type=radio].css-checkbox:checked + label.css-label {
                                background-position: 0 -18px;
                            }
                            label.css-label {
                    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_5667ba3623f6de63bb4bf897e9d5fda4.png);
                    -webkit-touch-callout: none;
                    -webkit-user-select: none;
                    -khtml-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }
    Html:
    HTML:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>CSS Checkbox Demo from CSSCheckbox.com</title>
        <link rel="stylesheet" href="style.css"/>
        <style type="text/css">
            /*this is just to organize the demo checkboxes*/
            label {margin-right:20px;}
        </style></head>
    <body>
    <h1 style="margin:0; margin-top:10px; padding:0; padding-left:25px; padding-bottom:10px; font-family:sans-serif;">CSS Checkboxes!</h1><div style="background:#444; color:#fafafa; padding:10px;"><h3>Dark Background</h3><table><tr><td><input type="radio" name="radiog_lite" id="radio1" class="css-checkbox" /><label for="radio1" class="css-label radGroup1">Option 1</label></td><td><input type="radio" name="radiog_lite" id="radio2" class="css-checkbox" checked="checked"/><label for="radio2" class="css-label radGroup1">Option 2</label></td><td><input type="radio" name="radiog_lite" id="radio3" class="css-checkbox" /><label for="radio3" class="css-label radGroup1">Option 1</label></td></tr></table></div><div style="background:#fafafa; color:#222; padding:10px;"><h3>Light Background</h3><table><tr><td><input type="radio" name="radiog_dark" id="radio4" class="css-checkbox" /><label for="radio4" class="css-label radGroup2">Option 1</label></td><td><input type="radio" name="radiog_dark" id="radio5" class="css-checkbox" checked="checked"/><label for="radio5" class="css-label radGroup2">Option 2</label></td><td><input type="radio" name="radiog_dark" id="radio6" class="css-checkbox" /><label for="radio6" class="css-label radGroup2">Option 1</label></td></tr></table></div>
           
            </body>
            </html>
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    Здесь реализовано посредством скрытия самой радиокнопки и стилизации тега label.
    Посмотри код, у тебя для label задано фоновое изображение.
    Чтобы фон был не слева, а сверху, тебе необходимо изменить отступы, сделать изображения состояний отдельными картинками и задать новые координаты для фонового изображения.
    Пример реализации:
    Перейти по ссылке

    Обрати пример на строку 10 и 16, там задана центровка фонового изображения. Также в строках 6 и 8 я закомментировал значения высоты и межстрочного интервала, т.к. теперь они не нужны.
    В общем дальше сам по себя подпилишь код.