Скрыть флажок и кнопки радио и использовать CSS

Я пытаюсь создать несколько кнопок радио и флажков, которые используют CSS для стилизации и скрыть их. Но я нахожусь в состоянии позиционировать их. Я могу заставить кнопки и коробки исчезнуть и изменить внешний вид в зависимости от того, активирован или нет, но когда я иду разместить их, например, 100 пикселей слева и 100 пикселей вниз, они не двигаются, они остаются в очереди.Скрыть флажок и кнопки радио и использовать CSS

@charset "utf-8"; 
 
/* CSS Document */ 
 
#COM1TX { 
 
\t left:200px; 
 
\t top:500px; 
 
\t position:relative 
 
\t 
 
} 
 
#COMRX { 
 
\t left: 0px; 
 
\t top: 100x; 
 
\t position: absolute; 
 
\t cursor: crosshair; 
 
} 
 
.radios .radio{ 
 
\t display: inline-block; 
 
\t background-color: #000000; 
 
\t color: #FFFFFF; 
 
\t left: 200px; 
 
\t top: 500px; 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t line-height: 100px; 
 
\t text-align: center; 
 
} 
 
.radios input[type=radio]{ \t 
 
    display:none; 
 
} 
 

 
.radios input[type=radio]:checked + .radio{ 
 
\t background-color: #ffffff; 
 
\t color: #000000; 
 
\t line-height: 100px; 
 
\t text-align: center; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
<link href="TEST2.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
<div class="radios"> 
 
<input type="radio" name="COMTX" id="COM1TX"> 
 
<label class="radio" for="COM1TX">COM 1 Tx</label> 
 
</div> 
 
<div> 
 
<input type="checkbox" name="COMRX" id="COMRX"> 
 
<label for="COMRX">COM 1,2 Rx</label> 
 
</div> 
 
<div class="radios"> 
 
<input type="radio" name="COMTX" id="COM2TX"> 
 
<label class="radio" for="COM2TX">COM 2 Tx</label> 
 
</div> 
 

 

 

 
</body> 
 
</html>

источник

2015-02-21 Christopher Doyle

Я неясны на том, что должен быть расположен где , Можете ли вы разработать или показать картинку, которая лучше иллюстрирует проблему? – j08691

Попробуйте стилизовать 'div' или' label' вместо 'input ' –

использование position: relative здесь, и вы сможете переместить их туда, куда вы хотите

.radios .radio{ 
     position: relative; 
     display: block; 
     background-color: #000000; 
     color: #FFFFFF; 
     left: 200px; 
     top: 8px; 
     width: 100px; 
     height: 100px; 
     line-height: 100px; 
     text-align: center; 
    }

Live Demo

источник

2015-02-21 21:11:53

Это немного ближе к тому, что им нужно, но мне нужно, чтобы они немного отстояли друг от друга. Интервал составляет 840px слева от документа, а кнопки начинаются примерно с 105px сверху. У меня есть 2 переключателя, а остальные - флажки. Я бы добавил фотографию, но не уверен, как это сделать в комментарии. –

Вот скрипка для этого. [link] (https://jsfiddle.net/hn1tett7/) заметьте рядом с XXX.XXX и ниже меньших чисел, где я хочу, чтобы они начали. –

Никто с идеей. –

Скрыть флажок и кнопки радио и использовать CSS

ответ

Смежные вопросы