Expected Result:
Icon before Option
Current Result:
Where is the icon?
How to display Icon before Please Select... or selected option ?
.selectDropDown {
height: 5em;
width: 30em;
background: #f3f3f3;
border: 1px solid #d2d8d8;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
padding: 16px 20px 16px 50px;
}
<p class="fieldset">
<div class="form-group">
<i class="glyphicon glyphicon-menu-down"></i>
<select class="form-control selectDropDown" id="sel1">
<option value="" disabled selected hidden>Please select...</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</p>
I think your primary question was you are unable to see the icon . So here if you are using bootstrap eg:<span class="glyphicon glyphicon-user"></span>
In that case, you have not added bootstrap.min.css, bootstrap.min.js These are needed to include to load your icon.
Here is the copy where Icon is visible https://codepen.io/nabanitadasgupta/pen/yzPbjW. If you want I can make the icon position as well as.
Check Now
you have to add bootstrap.min.css, jquery.min.js & bootstrap.min.js file and set this css and it will done
.posab{
position: absolute!important;
top: 28px!important;
left: 10px !important;}
.form-control.selectDropDown {
height: 5em;
width: 30em;
background: #f3f3f3;
border: 1px solid #d2d8d8;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
padding: 16px 20px 16px 50px;
opacity:0.7;
}
.form-group{
position:relative;}
.posab{
position: absolute!important;
top: 28px!important;
left: 10px !important;
z-index:-1;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p class="fieldset">
<div class="form-group">
<i class="glyphicon glyphicon-user posab"></i>
<select class="form-control selectDropDown" id="sel1">
<option value="" disabled selected hidden>Please select...</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</p>
Related
I have used a datalist here. I want to change the default arrow that comes with the datalist. Is there any way I can get the arrow shown in the second image, instead of the default arrow ?
Thank you.
.contact-input-datalist::-webkit-calendar-picker-indicator {
opacity: 0;
}
.contact-input-datalist {
position: relative;
background-color: ;
}
.contact-input-datalist:before {
content: "\f073";
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
<div>
<input type="text" list="events" class="uk-input contact-input-datalist" placeholder="Type of Event" />
<datalist name="" id="events">
<option>Event 1</option>
<option>Event 2</option>
<option>Event 3</option>
<option>Event 4</option>
</datalist>
</div>
input and datalist don't support :before, so the background arrow is placed into the input. You need to mind the path of the arrow image.
.contact-input-datalist::-webkit-calendar-picker-indicator {
opacity:0;
}
input {
width: 200px;
height: 30px;
background:#fff url(arrow.png) 145px -20px no-repeat;
padding-right: 35px;
box-sizing: border-box;
border: 1px solid grey;
}
<div>
<input type="text" list="events" class="uk-input contact-input-datalist" placeholder="Type of Event" />
<datalist name="" id="events">
<option>Event 1</option>
<option>Event 2</option>
<option>Event 3</option>
<option>Event 4</option>
</datalist>
</div>
I'm trying to put my own caret icon at the right most end of the maindiv for this custom dropdown. How can I achieve this?
.maindiv{
width: 200px;
height: 40px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px;
}
.maindiv select{
width: 240px;
height: 40px;
border: none;
}
<div class="maindiv">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
<!-- i want to put my own caret icon here -->
</div>
You need to use pseudo css :after to .maindiv and set .maindiv to position: relative
.maindiv{
width: 200px;
height: 40px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px;
position: relative; // Added
}
.maindiv select{
-webkit-appearance: none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
width: 100%;
height: 40px;
border: none;
}
.maindiv:after {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #007bff transparent transparent transparent;
position: absolute;
right: 10px;
content: "";
top: 18px;
pointer-event: none;
}
<div class="maindiv">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
<!-- i want to put my own caret icon here -->
</div>
/*create a parent div with position relative*/
.maindiv .select,
.maindiv .select-font{
width: 240px;
height: 40px;
border: none;
position: relative;
overflow: hidden;
border-radius: 3px;
border: 1px solid #000;
margin: 0 0 15px;
background: #eee;
}
/*style your select tag */
select {
width: 100%;
height: 100%;
border: 0px;
padding: 0 10px;
position: relative;
z-index: 2;
cursor: pointer;
background:transparent;
}
/* Then Remove Browser Default caret or dropdown sign*/
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance: none;
}
/*for IE10*/
select::-ms-expand {
display: none;
}
/*Put the icon in before or after and style it*/
/* 1.Create caret sign with css */
.select::after {
content: "";
position: absolute;
right: 10px;
display: inline-block;
z-index: 1;
top: 50%;
transform: translateY(-50%);
}
.select.caret::after {
border-top: 5px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.select.angle::after {
border: solid #000;
border-width: 0 2px 2px 0;
padding: 2px;
transform: translateY(-50%) rotate(45deg);
}
/* 1. Put Font as a caret sign advisable as ou can control it as a font */
.select-font::after {
content: "";
position: absolute;
right: 10px;
display: inline-block;
z-index: 1;
top: 50%;
transform: translateY(-50%);
font-family: fontawesome;
font-size: 17px;
color: #000;
}
.select-font.caret::after {
content: "\f0d7";
}
.select-font.angle::after {
content: "\f107";
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="maindiv">
<h2>1. Create caret with css</h2>
<div class="select caret">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
</div>
<div class="select angle">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
</div>
<h2>2. Use Font awesome Libraray or Any other font Library Just include the style file in header</h2>
<div class="select-font caret">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
</div>
<div class="select-font angle">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
</div>
</div>
there is a default icon ,the problem is the width of your select tag is higher than the width of main div
You can do something like this:
.maindiv {
width: 200px;
height: 40px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px;
position: relative;
}
.maindiv span {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: .8em;
}
.maindiv select {
width: 240px;
height: 40px;
border: none;
}
<div class="maindiv">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
<span>▼</span>
</div>
Just added display: flex; to maindiv
.maindiv{
width: 200px;
height: 40px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px;
display: flex;
}
.maindiv select{
width: 240px;
height: 40px;
border: none;
}
<div class="maindiv">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
<!-- i want to put my own caret icon here -->
</div>
I'm using bootstrap 4 with Angular 2 and have the following select:
<div class="form-group">
<label class="col-md-4 control-label" for="OptionExample">Select an option:</label>
<div class="col-md-4">
<select id="optionExample" name="optionExample" class="form-control" [(ngModel)]="ngmodeloptionExample"
(ngModelChange)="optionExamples()">
<option disabled [ngValue]="-1">Select an Option</option>
<option *ngFor="let option of options" [ngValue]="option">{{option.property }}</option>
</select>
</div>
</div>
Is it possible for me to style this? I tried adding some bootstrap classes, but no luck. I am open to using Typescript or javascript, but having difficulty using a library like:
https://silviomoreto.github.io/bootstrap-select/examples/
.selectWrapper {
width: 100%;
overflow: hidden;
position: relative;
border: 1px solid #bbb;
border-radius: 2px;
background:#FFFFFF url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%2300AEA9%22%2F%3E%3C%2Fsvg%3E') right 13px center no-repeat;
}
.selectWrapper select {
padding: 12px 40px 12px 20px;
font-size: 18px;
line-height: 18px;
width: 100%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: ellipsis;
}
<div class="selectWrapper">
<select>
<option>Lorem</option>
<option>Parturient</option>
<option>Euismod</option>
</select>
</div>
now you can do it with Bootstrap 4.1
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
see docs
I need to create search form like on the picture but I don't know how to put inside tab with dropdown list. Currently I have such a code
<form action="" class="search-form">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
</form>
You could do it like this, but you would need to style it the way that you wan't it.
I added a <select> tag and a <input type="submit" value="Search"> button
<form action="" class="search-form">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
<select name="" id="">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
</select>
<input type="submit" value="Search">
</form>
Just add the images in your styling in sudo elements(:after, :before).
#iconified {
padding: 10px;
width: 56%;
border-radius: 7px;
border: 2px solid #DDDDDD;
outline: none;
}
input[type="submit"] {
position: absolute;
left: 308px;
top: 16px;
}
select {
position: absolute;
left: 225px;
top: 17px;
background: none;
border: 1px solid #DDD;
border-top: 0;
border-bottom: 0;
outline: none;
}
<form action="" class="search-form">
<input type="text" class="form-control empty" id="iconified" placeholder="search"/>
<select name="" id="">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
</select>
<input type="submit" value="Search">
</form>
Try the below sample
::-webkit-input-placeholder {
text-align: left;
padding: 35% 35% 0 15%;
}
:-moz-placeholder { /* Firefox 18- */
text-align: left;
}
::-moz-placeholder { /* Firefox 19+ */
text-align: left;
}
:-ms-input-placeholder {
text-align: center;
}
#iconified {
/*padding: 10px;*/
width: 24%;
border-radius: 7px;
border: 2px solid #DDDDDD;
outline: none;
}
input[type = "text"] {
background: url("http://png.findicons.com/files/icons/1389/g5_system/32/toolbar_find.png") top left no-repeat;
background-size: 10%;
background-position: 4px 8px;
height: 30px;
padding-right: 30px;
}
input[type="submit"] {
position: absolute;
left: 340px;
top: 16px;
background: url(https://cdn2.iconfinder.com/data/icons/arrows-and-universal-actions-icon-set/256/arrow_right_circle-32.png) no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
/* height: 20px; */
padding-bottom: 2px;
width: 82px;
background-size: 20px 19px;
border: none;
}
select {
position: absolute;
left: 225px;
top: 17px;
background: none;
border: 1px solid #DDD;
border-top: 0;
border-bottom: 0;
outline: none;
color: #DDDDDD;
}
<form action="" class="search-form">
<input type="text" class="form-control empty" id="iconified" placeholder="Search" />
<select name="" id="slctOption">
<option selected="selected" value="0">All Categories</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<input type="submit" value="">
</form>
This link will help you search-bar-dropdown
I want to remove the default arrow from the select box and want to use custom icon. From the previous answers on SO, I have found out that it is not possible (to make it work with major browsers). Only possibility is to wrap the select inside a div, and set its width more than the div width and setting overflow: hidden.
I am trying following, but it does not work. What I'm doing wrong?
.selectParent {
width: 80px;
overflow: hidden;
}
.selectParent select {
width: 100px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px 30px 2px 2px;
border: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}
<div class="selectParent">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
JSFiddle:
http://jsfiddle.net/gcPmC/
Please follow the way like below:
.selectParent {
width:120px;
overflow:hidden;
}
.selectParent select {
display: block;
width: 100%;
padding: 2px 25px 2px 2px;
border: none;
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") right center no-repeat;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.selectParent.left select {
direction: rtl;
padding: 2px 2px 2px 25px;
background-position: left center;
}
/* for IE and Edge */
select::-ms-expand {
display: none;
}
<div class="selectParent">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<br />
<div class="selectParent left">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Try to replace the
padding: 2px 30px 2px 2px;
with
padding: 2px 2px 2px 2px;
It should work.