HTML-переключатели: скрыть маркеры

Question

Я хочу, чтобы конкретный компонент формы выполнял роль переключателей (одновременно можно выбрать только одну опцию).Однако я не хочу, чтобы показывались радиопуляри, выбирая альтернативные методы презентации, такие как выделение при ярком освещении или какой-либо другой метод.Это допускает постепенную деградацию: если пользовательский браузер не поддерживает Javascript, он просто ухудшит основные радиокнопки.Я хочу, чтобы скрыть кнопки пули через Javascript или CSS.Кто-нибудь знает как?Благодарю.

Answer 1

Немного скрыть переключатели (без потери доступности, конечно) можно с помощью следующего CSS:

input[type="radio"] {
    left: -999em;
    position: absolute;
}

Использование opacity: 0; не идеально, так как кнопка все еще там, занимая место на странице. Положение вне поля зрения - путь.

Answer 2

У меня есть простое решение, работающее, когда у меня есть метка, окружающая мои переключатели с изображением, представляющим выбранную вещь:

<label>
    <input type="radio" name="foo">
    <img src="...">
</label>

Затем я применил следующие стили:

label {
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    cursor: pointer;
}

label input[type=radio] {
    opacity: 0;
}

label img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

:checked + img {
    opacity: 1;
}

По существу каждый label становится прямоугольником обычного размера, который полностью заполнен img. Само радио скрыто с помощью opacity:0. Пользователь может сказать, что то, что выбрано как img рядом с отмеченным радио, будет непрозрачным, тогда как остальные полупрозрачны. Вы можете довольно легко создавать различные другие эффекты.

Мне нравится то, что форма остается простой в обработке, она это просто группа переключателей.

Я использовал непрозрачность для переключателей вместо display:none или visibility:hidden, так как тогда они все еще находятся в tabindex и форма остается доступной для клавиатуры.

Answer 3

Если я правильно понимаю, вам нужны радиокнопки, но вы не хотите, чтобы сами кнопки появлялись.Имейте в виду, что простое удаление кнопок НЕ обеспечит удобство для пользователя.Вы должны иметь некоторую форму обратной связи с пользователем.

У вас есть два варианта:

1) Запрограммируйте это, используя javascript / jquery.Имея это в виду, я бы предложил вам использовать радио-кнопки в качестве начального заполнителя, а затем использовать javascript (в идеале через плагин jquery), который перерисовает страницу и заменит кнопки на интерактивные элементы div и динамически изменяющееся значение скрытого поля.

2) Используйте мета-класс CSS: флажок , который, к сожалению, не поддерживает кросс-браузер.

Answer 4

$('#js input[type=radio]').hide();

Answer 5

Не думаю, что вы можете скрыть это с помощью css.Вам придется скрыть радиокнопки, а затем заменить функциональность на JS.может быть, вам подойдет выбранный список LI.

Из пользовательского интерфейса jQuery: http://jqueryui.com/demos/selectable/

<input type='radio' value='1' name='rad' class='radio'>
<input type='radio' value='2' name='rad' class='radio'>
<input type='radio' value='3' name='rad' class='radio'>

<ol id="selectable" style='display:none'>
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
</ol>

$(function() {
    $('.radio').hide();
    $( "#selectable" ).show().selectable({
       selected: function(event, ui) {//figure out which was selected and mark the hidden radio button}
    });
});

Answer 6

var inputs = document.getElementById('my-form').getElementsByTagName('input');

for (var i = 0, inputsLength = inputs.length;i < inputsLength; i++) {

    var input = inputs[i];

    if (input.getAttribute('type') == 'radio') {
        input.style.display = 'none';
    }

}

В качестве альтернативы, если ваш браузер поддерживает это (querySelectorAll in document) ...

document.querySelectorAll('#my-form input[type="radio"]').style.display = 'none';

Answer 7

Просто вставьте: style="display:none;" внутри каждой "<input type='radio'…>" метки.

Это делает пули невидимыми, но оставляет ярлыки с надписью.

Answer 8

вы можете сделать это, добавив этот стиль = "list-style: none;"