Скрыть галочку с помощью css

Я хотел бы знать, можно ли скрыть проверочный переключатель с помощью css, используя:

  { display:none; }

Я не знаю, как обращаться с этим элементом. Проверенный переключатель всегда показывает "нет", что ничего не значит для пользователя, и я хочу скрыть его. Это возможно? Спасибо за любой указатель.

Ответ 1

Просто немного подсказки, если вы все еще хотите использовать всю встроенную поддержку браузера для радиостанций и флажков, например, перемещение между ними с помощью & uarr; и & darr;, установите css на position:fixed;opacity:0, это сохранит все функциональные возможности, но сохранит вход скрытым и не займет какое-либо место макета. Последние 3 часа я потратил на это, но он работает!

Ответ 2

Дополнительно к ответу Натана Ли

input[type="radio"]:checked{
    visibility:hidden;
}

- это опция для указания отмеченного переключателя

input[type="radio"][value="text"]:checked{
    visibility:hidden;
}

- это опция для указания отмеченного переключателя со значением, равным "text" ( "none" в вашем примере)

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Если значение не известно, некоторые jQuery могут сделать трюк: http://api.jquery.com/attribute-equals-selector/

Ответ 3

Попробуйте visibility:hidden; Это будет работать

Вот РАБОЧАЯ ДЕМО

HTML:

<input class="checked" type="radio" checked />

CSS:

input.checked[type="radio"]{visibility:hidden;}

Я надеюсь, что это то, что вы ищете.

Ответ 4

Если вы хотите скрыть флажок/радио много раз, это сделать пользовательский флажок/радио.

Если вы хотите сосредоточиться на метке для ввода, используйте непрозрачность: 0; позиция: абсолютная; ширина: 0; что делает ввод невидимым, не занимая места.

Если вы используете дисплей: нет; или видимость: скрытая; он будет иметь аналогичный эффект, но в настоящее время наиболее используемые браузеры (MSIE11, Edge, Chrome 60.0.3112.101, Firefox 55) не позволяют фокусировать элемент с помощью клавиатуры, что делает его менее доступным.

.opacity {
	position: absolute;
	opacity: 0;
	width: 0;		/* for internet explorer */
}

.visibility {
	visibility: hidden;
}

.nodisplay {
	display: none;
}

input[type=checkbox]+label {
	font-weight: normal;
}
input[type=checkbox]:checked+label {
	font-weight: bold;
}
input[type=checkbox]:focus+label {
	border: 1px dotted #000;
}

<p>
	<input type="button" value="Click this button and press tab to change focus">
</p>
<div>
   <input class="opacity" type="checkbox" id="checkbox1">
   <label for="checkbox1">Press space to (un)check</label>
</div>
<div>
   <input class="opacity" type="checkbox" id="checkbox2">
   <label for="checkbox2">Press space to (un)check</label>
</div>
<div>
   <input class="visibility" type="checkbox" id="checkbox3">
   <label for="checkbox3">Press space to (un)check</label>
</div>
<div>
   <input class="visibility" type="checkbox" id="checkbox4">
   <label for="checkbox4">Press space to (un)check</label>
</div>
<div>
   <input class="nodisplay" type="checkbox" id="checkbox5">
   <label for="checkbox5">Press space to (un)check</label>
</div>
<div>
   <input class="nodisplay" type="checkbox" id="checkbox6">
   <label for="checkbox6">Press space to (un)check</label>
</div>

Ответ 5

Попробуйте использовать селектор :checked:

input[type="radio"]:checked {
    display: none;
}

Демо: http://jsfiddle.net/RkzG5/

Ответ 6

Если вы использовали {display: none;}, и вы все еще видите пробел (например, 3px или около того), то, вероятно, у вас есть пробелы или новые строки между элементами вашего html, которые иногда могут вызывать средство визуализации для отображения некоторых пикселей между этими элементами.

Это действительно проблематично и может быть очень трудно идентифицировать как проблему без этих знаний, но как только вы знаете, у вас есть два простых решения:

Либо удалите это пробел между вашими тегами в html. (К сожалению, это делает ваш html messier, поэтому второй вариант может быть лучше.)
Или, в вашем css, установите размер шрифта в родительском контейнере равным 0px. ex: #parent{font-size:0px;}, а затем снова инициализируйте его для всех дочерних элементов родителя с помощью #parent *{font-size:initial;}.

#parent{
  font-size:0px;
  display:block;
}
#parent *{
  font-size:initial;
}
.tab-label {
  display:inline-block;
  background: #eee; 
  border: 1px solid; 
}
[name="tab-group-1"] {
  display: none;  
}

<div id="parent">
    
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label class="tab-label" for="tab-1">Tab One</label>
       <input type="radio" id="tab-2" name="tab-group-1">
       <label class="tab-label" for="tab-2">Tab Two</label>
       <input type="radio" id="tab-3" name="tab-group-1">
       <label class="tab-label" for="tab-3">Tab Three</label>
 </div>