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

gamera · 9 Июн 2015

Всем привет, нашел на одном из сайтов кастомный радио бокс который мне больше всех подходит, но вот задача как сделать чтобы радио бокс был над текстом, пробовал делать 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>

mdss · 9 Июн 2015

Здесь реализовано посредством скрытия самой радиокнопки и стилизации тега label.
Посмотри код, у тебя для label задано фоновое изображение.
Чтобы фон был не слева, а сверху, тебе необходимо изменить отступы, сделать изображения состояний отдельными картинками и задать новые координаты для фонового изображения.
Пример реализации:
Для просмотра ссылки Войди или Зарегистрируйся

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

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

gamera

Постоялец

mdss

♖♘♗♕♔♗♘♖