Pure CSS Radio Button Tiles-سفارش سازی اینپوت رادیو با css

CSS

* {
	 box-sizing: border-box;
	 font-family: 'Helvetica Neue', sans-serif;
}
 body {
	 background-color: black;
}
 .container {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 height: 100vh;
}
 .radio-tile-group {
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
}
 .radio-tile-group .input-container {
	 position: relative;
	 height: 7rem;
	 width: 7rem;
	 margin: 0.5rem;
}
 .radio-tile-group .input-container .radio-button {
	 opacity: 0;
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 100%;
	 width: 100%;
	 margin: 0;
	 cursor: pointer;
}
 .radio-tile-group .input-container .radio-tile {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 width: 100%;
	 height: 100%;
	 border: 2px solid #079ad9;
	 border-radius: 5px;
	 padding: 1rem;
	 transition: transform 300ms ease;
}
 .radio-tile-group .input-container .icon svg {
	 fill: #079ad9;
	 width: 3rem;
	 height: 3rem;
}
 .radio-tile-group .input-container .radio-tile-label {
	 text-align: center;
	 font-size: 0.75rem;
	 font-weight: 600;
	 text-transform: uppercase;
	 letter-spacing: 1px;
	 color: #079ad9;
}
 .radio-tile-group .input-container .radio-button:checked + .radio-tile {
	 background-color: #079ad9;
	 border: 2px solid #079ad9;
	 color: white;
	 transform: scale(1.1, 1.1);
}
 .radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg {
	 fill: white;
	 background-color: #079ad9;
}
 .radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {
	 color: white;
	 background-color: #079ad9;
}

Html

<div class="input-container">
      <input id="drive" class="radio-button" type="radio" name="radio" />
      <div class="radio-tile">
        <div class="icon car-icon">
          <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
            <path d="M0 0h24v24H0z" fill="none"/>
          </svg>
        </div>
        <label for="drive" class="radio-tile-label">Drive</label>
      </div>
    </div>