I am working on this form using `bootstrap@4.0.0-beta'. In this, I want to create the drop down menu as shown in the following image just like that in material design but I want to do this using bootstrap.I am trying to use this code ,but it's not working. Does anyone know how to make like this dropdown menu. Please help me to fix this issue.
Thanks
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> example image
/* form starting stylings ------------------------------- */ .group { position:relative; margin-bottom:45px; } input { font-size:18px; padding:10px 10px 10px 5px; display:block; width:300px; border:none; border-bottom:1px solid #757575; } input:focus { outline:none; } /* LABEL ======================================= */ label { color:#999; font-size:18px; font-weight:normal; position:absolute; pointer-events:none; left:5px; top:10px; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } /* active state */ input:focus ~ label, input:valid ~ label { top:-20px; font-size:14px; color:#5264AE; } /* BOTTOM BARS ================================= */ .bar { position:relative; display:block; width:300px; } .bar:before, .bar:after { content:''; height:2px; width:0; bottom:1px; position:absolute; background:#5264AE; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } .bar:before { left:50%; } .bar:after { right:50%; } /* active state */ input:focus ~ .bar:before, input:focus ~ .bar:after { width:50%; } /* HIGHLIGHTER ================================== */ .highlight { position:absolute; height:60%; width:100px; top:25%; left:0; pointer-events:none; opacity:0.5; } /* active state */ input:focus ~ .highlight { -webkit-animation:inputHighlighter 0.3s ease; -moz-animation:inputHighlighter 0.3s ease; animation:inputHighlighter 0.3s ease; } /* ANIMATIONS ================ */ @-webkit-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } @-moz-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } @keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } <form> <div class="group"> <input type="text" required> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div> <div class="group"> <input type="text" required> <span class="highlight"></span> <span class="bar"></span> <label>Email</label> </div> </form>2 Answers
Answers 1
To bring the Material feel to select, apply the below given styles to select tag
CSS
select{ border-bottom:1px solid #757575; -webkit-appearance: none; background: #fff; border-radius: 0; } Example
/* form starting stylings ------------------------------- */ .group { position:relative; margin-bottom:45px; } input { font-size:18px; padding:10px 10px 10px 5px; display:block; width:300px; border:none; border-bottom:1px solid #757575; } select { font-size:18px; padding:10px 10px 10px 5px; display:block; width:300px; border:none; border-bottom:1px solid #757575; -webkit-appearance: none; background: #fff; border-radius: 0; } input:focus { outline:none; } select:focus { outline:none; } /* LABEL ======================================= */ label { color:#999; font-size:18px; font-weight:normal; position:absolute; pointer-events:none; left:5px; top:10px; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } /* active state */ input:focus ~ label, input:valid ~ label { top:-20px; font-size:14px; color:#5264AE; } select:focus ~ label, select:valid ~ label { top:-20px; font-size:14px; color:#5264AE; } /* BOTTOM BARS ================================= */ .bar { position:relative; display:block; width:300px; } .bar:before, .bar:after { content:''; height:2px; width:0; bottom:1px; position:absolute; background:#5264AE; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } .bar:before { left:50%; } .bar:after { right:50%; } /* active state */ input:focus ~ .bar:before, input:focus ~ .bar:after { width:50%; } select:focus ~ .bar:before, select:focus ~ .bar:after { width:50%; } /* HIGHLIGHTER ================================== */ .highlight { position:absolute; height:60%; width:100px; top:25%; left:0; pointer-events:none; opacity:0.5; } /* active state */ input:focus ~ .highlight { -webkit-animation:inputHighlighter 0.3s ease; -moz-animation:inputHighlighter 0.3s ease; animation:inputHighlighter 0.3s ease; } select:focus ~ .highlight { -webkit-animation:inputHighlighter 0.3s ease; -moz-animation:inputHighlighter 0.3s ease; animation:inputHighlighter 0.3s ease; } /* ANIMATIONS ================ */ @-webkit-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } @-moz-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } @keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } }<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <form> <div class="group"> <select class=" " id="exampleFormControlSelect1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div> <div class="group"> <input type="text" required> <span class="highlight"></span> <span class="bar"></span> <label>Email</label> </div> </form>Answers 2
Finally i made it
/* form starting stylings ------------------------------- */ .group { position:relative; margin-bottom:45px; } input { font-size:18px; padding:10px 10px 10px 5px; display:block; width:300px; border:none; border-bottom:1px solid #757575; } select { font-size:18px; padding:10px 10px 10px 5px; display:block; width:300px; border:none; border-bottom:1px solid #757575; } input:focus { outline:none; } select:focus { outline:none; } /* LABEL ======================================= */ label { color:#999; font-size:18px; font-weight:normal; position:absolute; pointer-events:none; left:5px; top:10px; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } /* active state */ input:focus ~ label, input:valid ~ label { top:-20px; font-size:14px; color:#5264AE; } select:focus ~ label, select:valid ~ label { top:-20px; font-size:14px; color:#5264AE; } /* BOTTOM BARS ================================= */ .bar { position:relative; display:block; width:300px; } .bar:before, .bar:after { content:''; height:2px; width:0; bottom:1px; position:absolute; background:#5264AE; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } .bar:before { left:50%; } .bar:after { right:50%; } /* active state */ input:focus ~ .bar:before, input:focus ~ .bar:after { width:50%; } select:focus ~ .bar:before, select:focus ~ .bar:after { width:50%; } /* HIGHLIGHTER ================================== */ .highlight { position:absolute; height:60%; width:100px; top:25%; left:0; pointer-events:none; opacity:0.5; } /* active state */ input:focus ~ .highlight { -webkit-animation:inputHighlighter 0.3s ease; -moz-animation:inputHighlighter 0.3s ease; animation:inputHighlighter 0.3s ease; } select:focus ~ .highlight { -webkit-animation:inputHighlighter 0.3s ease; -moz-animation:inputHighlighter 0.3s ease; animation:inputHighlighter 0.3s ease; } /* ANIMATIONS ================ */ @-webkit-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } @-moz-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } @keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } }<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <form> <div class="group"> <select class=" " id="exampleFormControlSelect1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div> <div class="group"> <input type="text" required> <span class="highlight"></span> <span class="bar"></span> <label>Email</label> </div> </form>
0 comments:
Post a Comment