CODEWITHSUNDEEP
htmlcss
Vishnu Shenoy
Vishnu Shenoy

Reputation: 872

how to create a check box with rectangle border?

gender checkbox

I have tried using border property but no able to get the design proper. Please help with design a form like one in the image

HTML

<div>
   <h3>Gender</h3>
        <div class="gender">
          <div>
            <input type="radio" name="gender" value="Male">
            <span>Male</span>
          </div>
          <div>
            <input type="radio" name="gender" value="Female">
            <span>Female</span>
          </div>
          <div>
            <input type="radio" name="gender" value="Others">
            <span>Others</span>
          </div>
        </div>
      </div>
    </div>

CSS

 .gender{
            display: flex;
            width: 100%;
            border: 2px solid grey;
            div{
            width: 33%;
            }
            input{
            color: blue;
         }

Upvotes: 1

Views: 2178

Answers (5)

Raeesh Alam
Raeesh Alam

Reputation: 3480

You need to wrap input type="radio" inside label element so with help of the :checked pseudo-class in CSS selects elements when they are in the selected state and follow tilde(~) operator for next to input element style.

I hope below snippet will help you lot.

.gender{
  font-family: Arial;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.gender label{
  position: relative;
  margin: 4px 15px 4px 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.gender input{
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}
.gender label span{
  display: block;
  text-align: center;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  color: #bababa;
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 20px;
  min-width: 70px;
  transition: 350ms;
}
.gender label:hover span, .gender label:hover span:before{
  border: 1px solid #777;
  color: #777;
}
.gender label span:before{
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 50%;
  margin-top: -7px;
  left: 10px;
  border: 1px solid #ccc;
  transition: 500ms;
}
.gender input:checked ~ span{
  color: blue;
  border: 1px solid blue;
}
.gender label input:checked ~ span:before{
  background: blue;
  border: 1px solid blue;
}
<div>
  <h3>Gender</h3>
  <div class="gender">
    <label>
      <input type="radio" name="gender" value="Male" checked>
      <span>Male</span>
    </label>
    <label>
      <input type="radio" name="gender" value="Female">
      <span>Female</span>
    </label>
    <label>
      <input type="radio" name="gender" value="Others">
      <span>Others</span>
    </label>
  </div>
</div>

Upvotes: 3

vadivel a
vadivel a

Reputation: 1794

Hope this help you.

.container_radio {
  display: block;
  position: relative;
  padding-left: 50px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 2px solid grey;
  margin: 10px;
  border-radius: 5px;
  color: #D3D3D3;
  padding-right: 19px;
}


/* Hide the browser's default radio button */

.container_radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


/* Create a custom radio button */

.checkmark {
  position: absolute;
  top: 4px;
  left: 15px;
  height: 25px;
  width: 25px;
  border: 1px solid #ddd;
  border-radius: 100%;
}


/* On mouse-over, add a grey background color */

.container_radio:hover input~.checkmark {
  background-color: #ccc;
}


/* When the radio button is checked, add a blue background */

.container_radio input:checked~.checkmark {
  background-color: #2196F3;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the indicator (dot/circle) when checked */

.container_radio input:checked~.checkmark:after {
  display: block;
}


/* Style the indicator (dot/circle) */

.container_radio .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.gender .container_radio {
  display: inline-block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/darkly/bootstrap.min.css">
<h3>Gender</h3>
<div class="gender">


  <label class="container_radio">Male
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
  <label class="container_radio">Female
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
  <label class="container_radio">Others
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>


</div>

Upvotes: 0

Joe
Joe

Reputation: 586

With responsive :-)

.gender{
  display: flex;
  width: 100%;
  }
  
  input{
  color: blue;
}

.radio{
  border-radius:5px;
  border: 2px solid gray;
  padding:5px;
  
}

label{
  padding-right:10px;
}

#custom-radio-buttons .radio-wrapper {
  display: inline-block;
}
#custom-radio-buttons .radio-wrapper input[name="gender"] {
  display: none;
}
#custom-radio-buttons .radio-wrapper input[name="gender"] + label {
  color: #292321;
  font-family: Arial, sans-serif;
  font-size: 14px;
}
#custom-radio-buttons
  .radio-wrapper
  input[name="gender"]
  + label
  > span.outer {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: -4px 4px 0 0;
  border: 2px solid #cccccc;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #f8f8f8;
}
#custom-radio-buttons
  .radio-wrapper
  input[name="gender"]
  + label
  span.inner {
  display: block;
  position: absolute;
  display: none;
  width: 10px;
  height: 10px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  vertical-align: middle;
  cursor: pointer;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: grey;
}
#custom-radio-buttons
  .radio-wrapper
  input[name="gender"]:checked
  + label
  span.inner {
  background-color: blue;
  display: block;
}
<section id="custom-radio-buttons">
  <h3>Gender</h3>
  <div class="radio-wrapper">
    <div class="radio">
      <input type="radio" name="gender" id="radio1" value="Male">
      <label for="radio1">
        <span class="outer">
          <span class="inner animated"></span>
        </span>
        Male
      </label>
    </div>
  </div>
  <div class="radio-wrapper">
    <div class="radio">
      <input type="radio" name="gender" id="radio2" value="Female">
      <label for="radio2">
        <span class="outer">
          <span class="inner animated"></span>
        </span>
        Female
      </label>
    </div>
  </div>
  <div class="radio-wrapper">
    <div class="radio">
      <input type="radio" name="gender" id="radio3" value="Others">
      <label for="radio3">
        <span class="outer">
          <span class="inner animated"></span>
        </span>
        Others
      </label>
    </div>
  </div>
</section>

Upvotes: 0

Yasaman.Mansouri
Yasaman.Mansouri

Reputation: 560

.gender{
 font-family: 'Poppins',sans-serif;
  display: flex;
  width: 100%;
  }
  div{
  width: 70%;
  }
  input{
  color: blue;
}
.radio{
  border: 2px solid grey;
  margin:10px;
  border-radius:5px;
  padding:5px;
  padding-right:0px !important;
}
<div>
   <h3>Gender</h3>
        <div class="gender">
          <div class="radio">
            <input type="radio" name="gender" value="Male">
            <span>Male</span>
          </div>
          <div class="radio">
            <input type="radio" name="gender" value="Female">
            <span>Female</span>
          </div>
          <div class="radio">
            <input type="radio" name="gender" value="Others">
            <span>Others</span>
          </div>
        </div>
      </div>
    </div>

Upvotes: 2

ROOT
ROOT

Reputation: 11622

I think this is what you want, just add the CSS to the <div> not the wrapper.

.gender{
  display: flex;
  width: 100%;
}
.gender div {
  width: 33%;
  border: 2px solid #D3D3D3;
  color: #D3D3D3;
  border-radius: 5px;
  padding: 5px;
  margin: 10px;
}

.gender div:hover {
  width: 33%;
  border: 2px solid grey;
  color: black;
  border-radius: 5px;
  padding: 5px;
  margin: 10px;
}

input{
  color: blue;
}
<div>
  <h3>Gender</h3>
  <div class="gender">
    <div class="wrapper">
      <input type="radio" name="gender" value="Male">
      <span>Male</span>
    </div>
    <div>
      <input type="radio" name="gender" value="Female">
      <span>Female</span>
    </div>
    <div>
      <input type="radio" name="gender" value="Others">
      <span>Others</span>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions