CSS - JS | Radio Buton Görevi Atama

Arkadaşlar aşağıdaki resimdeki gibi radio buton tasarladım, ancak Resim 1' deki gibi görünüyor. Burada görülen radio butonları gizleyip tasarlamış olduğum divlere nasıl radio buton gibi görev yaptırabilirim. Resim 2'deki gibi olmasını istiyorum ve radio buton gibi görev görsün istiyorum.

style.css

.Radio {
	
}

.RadioPasif {
	height: 30px;
	width: 30px;
	line-height: 30px;
	border-radius: 15px;
	background: #C0C0C0;
	cursor: pointer;
	display: block;
	text-align: center;
	color: gray;
}

.RadioAktif {
	margin-top:20px;
	height: 30px;
	width: 30px;
	line-height: 30px;
	border-radius: 15px;
	background: #01A0E2;
	cursor: pointer;
	display: block;
	color: white;
	text-align: center;
}

 

index.php

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Radio Buton</title>
</head>
<body>
       <div class="RadioPasif"><input type="radio" name="sec" class="Radio" value="1">✖️</div>
       <div class="RadioAktif"><input type="radio" name="sec" class="Radio" value="2">✔</div>
</body>
</html>

 

Input'u gizleyip after, before özelliklerini kullanarak yapabilirsin. Bkz;

Html

<h2>Cinsiyet</h2>
<div class="radio">
    <input type="radio" name="survey" id="erkek">
    <label for="erkek">Erkek</label>
</div>
<div class="radio">
    <input type="radio" name="survey" id="bayan">
    <label for="bayan">Bayan</label>
</div>

Css

body { 
  background: #ddd; 
  font: 14px Arial;}
.radio { 
  position: relative; 
  margin-bottom: 10px;}
  .radio label { cursor: pointer; }
    .radio label:before {
      content: '✖️';
      font-size: 13px;
      background: #c0c0c0;
      border-radius: 50%;
      display: inline-block;
      width: 20px;
      height: 20px;
      text-align: center;
      margin-right: 3px;}
  .radio input { display: none; }
    .radio input[type=radio]:not(.hide):checked + label:before { 
      background: #01a0e2;
      content: "✔"; 
      color: #fff;}

Demo: http://codepen.io/nsevinctekin/pen/PZJPbG

Teşekkür ederim Nurullah hocam.

Cevap Yaz

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

Yukarı Git