I am making an app in react . So , here , I have the following code :

body{
  font-family: 'Raleway', sans-serif;
  background:#3E4651;
}
.list-choice{
  width:300px;
  margin:1em auto;
  position: relative;
  cursor: pointer;  
}
.list-choice input[type="radio"]{
  position:absolute;
  left:-9999px;
}

.list-choice-title {
width: 100%;
display: block;
background: #D8D8D8;
text-align: center;
padding: 0.55em 1em;
box-sizing: border-box;
color: #FFF;
text-shadow: 0 1px 0 #CACACA;
border-radius: 0.2em;
}
.list-choice:hover .list-choice-title {
border-radius:0.2em 0.2em 0 0;
}
.list-choice-objects label:nth-last-of-type(1) span{
  border-radius:0 0 0.2em 0.2em;
}
.list-choice input[type="radio"] + span {
color: #FFF;
background: #D8D8D8;
padding: 0.55em 1em;
display: block;
text-align: center;
box-sizing: border-box;
cursor: pointer;
width: 100%;
}
.list-choice-objects {
position: absolute;
top: 0;
padding-top: 2.1em;
box-sizing: border-box;
width: 100%;
overflow: hidden;
max-height: 0;
transition: all 250ms ease;
}
.list-choice:hover .list-choice-objects  input[type="radio"] + span {
position: relative;
top: 0;
transition: all 250ms ease-in-out;
}
.list-choice:hover input[type="radio"] + span:hover {
background:#BBB;
}
.list-choice:hover input[type="radio"]:checked + span:hover {
background:#74D68E;
}
.list-choice input[type="radio"]:checked + span {
background: #74D68E;
position: absolute;
top: 0em;
border-radius: 0.2em;
}
.list-choice:hover input[type="radio"]:checked + span {
border-radius: 0;
}
.list-choice:hover .list-choice-objects label:nth-last-of-type(1) input[type="radio"]:checked + span{
  border-radius:0 0 0.2em 0.2em;
}

.list-choice:hover .list-choice-objects {
max-height: 540px;
}
<div class="list-choice">
              <div class="list-choice-title">Month</div>
              <div class="list-choice-objects">
                <label>
                  <input
                    onChange={this.changeUsState}
                    type="radio"
                    name="month"
                    value="Alabama"
                  />
                  <span>Alabama</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Alaska"
                    type="radio"
                    name="month"
                  />
                  <span>Alaska</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Arizona"
                    type="radio"
                    name="month"
                  />
                  <span>Arizona</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Arkansas"
                    type="radio"
                    name="month"
                  />
                  <span>Arkansas</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="California"
                    type="radio"
                    name="month"
                  />
                  <span>California</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Colorado"
                    type="radio"
                    name="month"
                  />
                  <span>Colorado</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Connecticut"
                    type="radio"
                    name="month"
                  />
                  <span>Connecticut</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Delaware"
                    type="radio"
                    name="month"
                  />
                  <span>Delaware</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Florida"
                    type="radio"
                    name="month"
                  />
                  <span>Florida</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Georgia"
                    type="radio"
                    name="month"
                  />
                  <span>Georgia</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Hawaii"
                    type="radio"
                    name="month"
                  />
                  <span>Hawaii</span>
                </label>

                <label>
                  <input
                    onChange={this.changeUsState}
                    type="radio"
                    name="month"
                    value="Alabama"
                  />
                  <span>Alabama</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Alaska"
                    type="radio"
                    name="month"
                  />
                  <span>Alaska</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Arizona"
                    type="radio"
                    name="month"
                  />
                  <span>Arizona</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Arkansas"
                    type="radio"
                    name="month"
                  />
                  <span>Arkansas</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="California"
                    type="radio"
                    name="month"
                  />
                  <span>California</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Colorado"
                    type="radio"
                    name="month"
                  />
                  <span>Colorado</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Connecticut"
                    type="radio"
                    name="month"
                  />
                  <span>Connecticut</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Delaware"
                    type="radio"
                    name="month"
                  />
                  <span>Delaware</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Florida"
                    type="radio"
                    name="month"
                  />
                  <span>Florida</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Georgia"
                    type="radio"
                    name="month"
                  />
                  <span>Georgia</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Hawaii"
                    type="radio"
                    name="month"
                  />
                  <span>Hawaii</span>
                </label>
              </div>
            </div>

So , when I run this code, it works well , but , the problem is that some of the options are appearing below , and it can’t be reached . So I think so that adding a scroll bar would fix the problem but how do I do that ?

thanks .

user19082798 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

2

I positioned the month as absolute and added a z-index so it always stays at the top and added an overflow:auto to the option content to make it have a scroll bar.

body {
  font-family: 'Raleway', sans-serif;
  background: #3E4651;
}

.list-choice {
  width: 300px;
  margin: 1em auto;
  position: relative;
  cursor: pointer;
}

.list-choice input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.list-choice-title {
  width: 100%;
  display: block;
  background: #D8D8D8;
  text-align: center;
  padding: 0.55em 1em;
  box-sizing: border-box;
  color: #FFF;
  text-shadow: 0 1px 0 #CACACA;
  border-radius: 0.2em;
  position: absolute;
  z-index: 1000;
}

.list-choice:hover .list-choice-title {
  border-radius: 0.2em 0.2em 0 0;
}

.list-choice-objects label:nth-last-of-type(1) span {
  border-radius: 0 0 0.2em 0.2em;
}

.list-choice input[type="radio"]+span {
  color: #FFF;
  background: #D8D8D8;
  padding: 0.55em 1em;
  display: block;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  width: 100%;
}

.list-choice-objects {
  position: absolute;
  top: 0;
  padding-top: 2.1em;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  max-height: 0;
  transition: all 250ms ease;
}

.list-choice:hover .list-choice-objects input[type="radio"]+span {
  position: relative;
  top: 0;
  transition: all 250ms ease-in-out;
}

.list-choice:hover input[type="radio"]+span:hover {
  background: #BBB;
}

.list-choice:hover input[type="radio"]:checked+span:hover {
  background: #74D68E;
}

.list-choice input[type="radio"]:checked+span {
  background: #74D68E;
  position: absolute;
  top: 0em;
  border-radius: 0.2em;
}

.list-choice:hover input[type="radio"]:checked+span {
  border-radius: 0;
}

.list-choice:hover .list-choice-objects label:nth-last-of-type(1) input[type="radio"]:checked+span {
  border-radius: 0 0 0.2em 0.2em;
}

.list-choice:hover .list-choice-objects {
  max-height: 400px;
  overflow: auto;
}
<div class="list-choice">
  <div class="list-choice-title">Month</div>
  <div class="list-choice-objects">
    <label>
      <input
        onChange={this.changeUsState}
        type="radio"
        name="month"
        value="Alabama"
      />
<span>Alabama</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Alaska"
                    type="radio"
                    name="month"
                  />
                  <span>Alaska</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Arizona"
                    type="radio"
                    name="month"
                  />
                  <span>Arizona</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Arkansas"
                    type="radio"
                    name="month"
                  />
                  <span>Arkansas</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="California"
                    type="radio"
                    name="month"
                  />
                  <span>California</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Colorado"
                    type="radio"
                    name="month"
                  />
                  <span>Colorado</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Connecticut"
                    type="radio"
                    name="month"
                  />
                  <span>Connecticut</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Delaware"
                    type="radio"
                    name="month"
                  />
                  <span>Delaware</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Florida"
                    type="radio"
                    name="month"
                  />
                  <span>Florida</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Georgia"
                    type="radio"
                    name="month"
                  />
                  <span>Georgia</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Hawaii"
                    type="radio"
                    name="month"
                  />
                  <span>Hawaii</span>
                </label>

    <label>
                  <input
                    onChange={this.changeUsState}
                    type="radio"
                    name="month"
                    value="Alabama"
                  />
                  <span>Alabama</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Alaska"
                    type="radio"
                    name="month"
                  />
                  <span>Alaska</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Arizona"
                    type="radio"
                    name="month"
                  />
                  <span>Arizona</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Arkansas"
                    type="radio"
                    name="month"
                  />
                  <span>Arkansas</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="California"
                    type="radio"
                    name="month"
                  />
                  <span>California</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Colorado"
                    type="radio"
                    name="month"
                  />
                  <span>Colorado</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Connecticut"
                    type="radio"
                    name="month"
                  />
                  <span>Connecticut</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Delaware"
                    type="radio"
                    name="month"
                  />
                  <span>Delaware</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Florida"
                    type="radio"
                    name="month"
                  />
                  <span>Florida</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Georgia"
                    type="radio"
                    name="month"
                  />
                  <span>Georgia</span>
                </label>
    <label>
                  <input
                    onChange={this.changeUsState}
                    value="Hawaii"
                    type="radio"
                    name="month"
                  />
                  <span>Hawaii</span>
                </label>
  </div>
</div>

2

You may set a size and overflow to the list-choice.

You may also use position:sticky;top:0;z-index:1; on the list-choice-title element to keep at top.

Example

body{
  font-family: 'Raleway', sans-serif;
  background:#3E4651;
}
.list-choice{
  width:300px;
  margin:1em auto;
  position: relative;
  cursor: pointer; 
  height:70vh;
  overflow:auto;
}
.list-choice input[type="radio"]{
  position:absolute;
  left:-9999px;
}

.list-choice-title {
width: 100%;
display: block;
background: #D8D8D8;
text-align: center;
padding: 0.55em 1em;
box-sizing: border-box;
color: #FFF;
text-shadow: 0 1px 0 #CACACA;
border-radius: 0.2em;
position:sticky;
top:0;
z-index:1;box-shadow:0 0 2px;
}
.list-choice:hover .list-choice-title {
border-radius:0.2em 0.2em 0 0;
}
.list-choice-objects label:nth-last-of-type(1) span{
  border-radius:0 0 0.2em 0.2em;
}
.list-choice input[type="radio"] + span {
color: #FFF;
background: #D8D8D8;
padding: 0.55em 1em;
display: block;
text-align: center;
box-sizing: border-box;
cursor: pointer;
width: 100%;
}
.list-choice-objects {
position: absolute;
top: 0;
padding-top: 2.1em;
box-sizing: border-box;
width: 100%;
overflow: hidden;
max-height: 0;
transition: all 250ms ease;
}
.list-choice:hover .list-choice-objects  input[type="radio"] + span {
position: relative;
top: 0;
transition: all 250ms ease-in-out;
}
.list-choice:hover input[type="radio"] + span:hover {
background:#BBB;
}
.list-choice:hover input[type="radio"]:checked + span:hover {
background:#74D68E;
}
.list-choice input[type="radio"]:checked + span {
background: #74D68E;
position: absolute;
top: 0em;
border-radius: 0.2em;
}
.list-choice:hover input[type="radio"]:checked + span {
border-radius: 0;
}
.list-choice:hover .list-choice-objects label:nth-last-of-type(1) input[type="radio"]:checked + span{
  border-radius:0 0 0.2em 0.2em;
}

.list-choice:hover .list-choice-objects {
max-height: 540px;
}
<div class="list-choice">
              <div class="list-choice-title">Month</div>
              <div class="list-choice-objects">
                <label>
                  <input
                    onChange={this.changeUsState}
                    type="radio"
                    name="month"
                    value="Alabama"
                  />
                  <span>Alabama</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Alaska"
                    type="radio"
                    name="month"
                  />
                  <span>Alaska</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Arizona"
                    type="radio"
                    name="month"
                  />
                  <span>Arizona</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Arkansas"
                    type="radio"
                    name="month"
                  />
                  <span>Arkansas</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="California"
                    type="radio"
                    name="month"
                  />
                  <span>California</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Colorado"
                    type="radio"
                    name="month"
                  />
                  <span>Colorado</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Connecticut"
                    type="radio"
                    name="month"
                  />
                  <span>Connecticut</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Delaware"
                    type="radio"
                    name="month"
                  />
                  <span>Delaware</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Florida"
                    type="radio"
                    name="month"
                  />
                  <span>Florida</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Georgia"
                    type="radio"
                    name="month"
                  />
                  <span>Georgia</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Hawaii"
                    type="radio"
                    name="month"
                  />
                  <span>Hawaii</span>
                </label>

                <label>
                  <input
                    onChange={this.changeUsState}
                    type="radio"
                    name="month"
                    value="Alabama"
                  />
                  <span>Alabama</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Alaska"
                    type="radio"
                    name="month"
                  />
                  <span>Alaska</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Arizona"
                    type="radio"
                    name="month"
                  />
                  <span>Arizona</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Arkansas"
                    type="radio"
                    name="month"
                  />
                  <span>Arkansas</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="California"
                    type="radio"
                    name="month"
                  />
                  <span>California</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Colorado"
                    type="radio"
                    name="month"
                  />
                  <span>Colorado</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Connecticut"
                    type="radio"
                    name="month"
                  />
                  <span>Connecticut</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Delaware"
                    type="radio"
                    name="month"
                  />
                  <span>Delaware</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Florida"
                    type="radio"
                    name="month"
                  />
                  <span>Florida</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Georgia"
                    type="radio"
                    name="month"
                  />
                  <span>Georgia</span>
                </label>
                <label>
                  <input
                    onChange={this.changeUsState}
                    value="Hawaii"
                    type="radio"
                    name="month"
                  />
                  <span>Hawaii</span>
                </label>
              </div>
            </div>