CODEWITHSUNDEEP
htmlcss
Jax Teller
Jax Teller

Reputation: 1467

Custom Radio button padding

I'm trying to do a custom radio button, I found some code on internet, and customed it. The probleme is, I need a padding 20px left/right in the label, and I need to keep the min-width at 110px and the li width is not wrapping content...

He is my code if you want to see.

.ui-radio {
    margin:25px 0 0 0;
    padding:0;
}

.ui-radio li {
    float:left;
    margin:0 20px 0 0;
    min-width:110px;
    height:40px;
    position:relative;
    list-style-type: none;
}

.ui-radio label, .ui-radio input {
   display:block;
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
}

.ui-radio input[type="radio"] {
   opacity:0;
   z-index:100;
}

.ui-radio input[type="radio"]:checked + label {
   border-bottom: solid 4px BLUE;
}

.ui-radio label {
    padding:5px;
    cursor:pointer;
    z-index:90;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
    padding:0 20px;
    line-height:30px;
    border-radius:2px;
}

.ui-radio label:hover {
    background:#DDD;
}
<ul class="ui-radio">
        <li>
            <input type="radio" id="choice1" name="personnel" />
            <label for="choice1">Long_choice_1</label>
        </li>
        <li>
            <input type="radio" id="choice2" name="personnel" />
            <label for="choice2">choice_2</label>
        </li>
</ul>

Upvotes: 0

Views: 1499

Answers (2)

Mohammad RN
Mohammad RN

Reputation: 130

default display of label is "inline". first you should change his display to "inline-block" , "block" or ...

for example :

html :

<!DOCTYPE html>
<html>

<head>
  <link class="menu-bar" rel="stylesheet" href="../css/index.css">
  <link class="container" rel="stylesheet" href="../css/menu.css">
  <meta charset="utf-8">
  <title>Cipher Program</title>
</head>

<body>
  <ul class="ui-radio">
    <li>
      <input type="radio" id="choice1" name="personnel" />
      <label for="choice1">Long_choice_1</label>
    </li>
    <li>
      <input type="radio" id="choice2" name="personnel" />
      <label for="choice2">choice_2</label>
    </li>
  </ul>
</body>

</html>

css :

body {
  overflow: hidden;
  background: #8e2de2;
  background: -webkit-linear-gradient(to right, #4a00e0, #8e2de2);
  background: linear-gradient(to right, #4a00e0, #8e2de2);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
body .ui-radio {
  display: inline-flex;
  flex-direction: column;
}
body .ui-radio li {
  margin-bottom: 10px;
  border-radius: 5px;
  background: #fff;
  list-style: none;
}
body .ui-radio li input[type="radio"] {
  position: absolute;
  visibility: hidden;
}
body .ui-radio li input[type="radio"]:checked ~ label::before {
  background: #990099;
}
body .ui-radio li label {
  cursor: pointer;
  min-width: 110px;
  display: flex;
  align-items: center;
  padding: 10px;
}
body .ui-radio li label::before {
  transition: background ease 0.2s;
  content: "";
  border-radius: 50%;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 10px;
  border: 3px solid #777;
  box-sizing: border-box;
}

Upvotes: 0

Mike
Mike

Reputation: 184

Remove position: absolute; from .ui-radio label, .ui-radio input.

Absolute positioning causes item's parent not to be aware of the content size, that why the content was overflowing.

Upvotes: 2

Related Questions