HTML - CSS | Checkbox Ve Radio Buton Görevi

Arkadaşlar işaretlenmiş radio butonun işaretini ikinci bir tıklamayla nasıl kaldırabilirim. Bu mümkün değilse checkbox'a radio buton gibi nasıl görev verebilirim. Çünkü checkbox işaretlenip işaret kaldırılabiliyor.

Html

<div class="SecenekIsaret">
	<input type="radio" name="cevap-1" id="secenek1-1" value="A">
	<label for="secenek1-1">A)</label>
</div>
<div class="SecenekIsaret">
	<input type="radio" name="cevap-1" id="secenek2-1" value="B">
	<label for="secenek2-1">B)</label>
</div>
<div class="SecenekIsaret">
	<input type="radio" name="cevap-1" id="secenek3-1" value="C">
	<label for="secenek3-1">C)</label>
</div>
<div class="SecenekIsaret">
	<input type="radio" name="cevap-1" id="secenek4-1" value="D">
	<label for="secenek4-1">D)</label>
</div>

Css

.SecenekIsaret { 
	position: relative; 
}
  
.SecenekIsaret label {
	cursor: pointer;
}
    
.SecenekIsaret label:before {
	content: '✖️';  
	font-size: 16px;
	background: #c0c0c0;
	border-radius: 50%;
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin-right: 10px;
	font-weight:bold;
	color: gray;
}
 
.SecenekIsaret input {
	display: none;
}

.SecenekIsaret input[type=radio]:not(.hide):checked + label:before { 
	background: green;
	content: "✔";  
	color: #fff;
}

 

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git