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>
Related
I want to have a border size for the below html code but I am unable to do so and have tried with its attribute's. pls if I can have the css for it.
<div class="navbar1">
<div class="select-div">
<select name="country" class="form-control" id="country">
<option value="USA" label="United States">United States</option>
<option value="CN" label="Canada">Canada</option>
</select>
<select name="language" class="form-control" id="language">
<option value="USA" label="English">English</option>
<option value="Mexico" label="Spanish">Spanish</option>
</select>
<select name="search" class="form-control" id="search">
<option value="search" label="Search">Search</option>
</select>
</div>
</div>
I tried writing CSS using the class,label,id attributes but I am unable to design it the way it's in the image attached
If i understand you correctly, you want to make select option like in the image.
if that's the case, Kindly check some changes below - if that helps.
I have added the icon using pseudo element ::after
select{
padding: 5px 30px 5px 5px;
appearance: none;
width: 150px;
border: 1px solid #bebebe;
}
.select,
.select-dark{
position: relative;
}
.select::after {
content: '\25BC';
position: absolute;
top: 5px;
right: 10px;
color: #6BBDD7;
cursor:pointer;
pointer-events:none;
transition:.25s all ease;
}
.select-dark::after {
content: '\25BC';
position: absolute;
top: 0;
right: 0;
background-color: #117CC0;
color: #fff;
cursor: pointer;
pointer-events: none;
transition: .25s all ease;
padding: 6px 6px 3px
}
<div class="select-div" style="display: flex;gap:20px">
<div class="select">
<select name="country" class="form-control" id="country">
<option value="USA" label="United States">United States</option>
<option value="CN" label="Canada">Canada</option>
</select>
</div>
<div class="select">
<select name="language" class="form-control" id="language">
<option value="USA" label="English">English</option>
<option value="Mexico" label="Spanish">Spanish</option>
</select>
</div>
<div class="select-dark">
<select name="search" class="form-control" id="search">
<option value="search" label="Search">Search</option>
</select>
</div>
</div>
I want to change this black arrow inside a selector from the initial position. How would you do that with CSS?
.form-control-countrySelector {
height: 40px;
width: 421px;
left: 0px;
right: 0px;
top: 30px;
/* white */
background: #FFFFFF;
border: 1px solid rgba(60, 66, 87, 0.12);
box-sizing: border-box;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.04);
border-radius: 8px 8px 0px 0px;
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
letter-spacing: 0.005em;
font-feature-settings: 'pnum' on, 'lnum' on;
color: #1A1F36;
padding: 9px;
margin-left: 110px;
}
<div>
<select className="form-control-countrySelector">
<option>United States</option>
</select>
<input type="text" className="form-control-countryZIP" id="cardNumber" placeholder="ZIP" />
</div>
if you want to hide arrow than add appearance: none; attribute in Select
select
{
width:100px;
appearance: none;
}
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
if you want add arrow before the option than
Add background image :
select{
width:100px;
appearance: none;
padding:5px 2px 2px 30px;
border: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat left center;
}
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
You can use clip-path property to draw your arrow and move it anywhere you want with display: grid and justify-self properties.
For example, you can put it in center.
.select {
display: grid;
grid-template-areas: "select";
align-items: center;
width:50%;
}
.select::after {
content: "";
width: 0.8em;
height: 0.5em;
background-color: #1b1b1b;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
justify-self: center;
margin-right:5px;
}
select {
/* A reset of styles, including removing the default dropdown arrow */
appearance: none;
/* Additional resets for further consistency */
background-color: transparent;
padding: 0 1em 0 0;
margin: 0;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: inherit;
line-height: inherit;
}
select,
.select:after {
grid-area: select;
}
<label for="standard-select">Select You Option</label>
<div class="select">
<select id="standard-select">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
<option value="Option length">
Option that has too long of a value to fit
</option>
</select>
Or put it in left side
.select {
display: grid;
grid-template-areas: "select";
align-items: center;
width:30%;
}
.select::after {
content: "";
width: 0.8em;
height: 0.5em;
background-color: #1b1b1b;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
justify-self: start;
margin-left:5px;
}
select {
/*A reset of styles, including removing the default dropdown arrow*/
appearance: none;
/* Additional resets for further consistency */
background-color: transparent;
padding: 0 1em 0 1.2rem;
margin: 0;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: inherit;
line-height: inherit;
}
select,
.select:after {
grid-area: select;
}
<label for="standard-select">Select Your Option</label>
<div class="select">
<select id="standard-select">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
<option value="Option length">
Option that has too long of a value to fit
</option>
</select>
</div>
For more information, you can read Custom Select Styles with Pure CSS and Awesome CSS Select Styles You Can Use Right Now articles.
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>
How can I make the select box look the same on all web browsers and devices but I can't find the right way to do that, so far the biggest problem is on IE 10 and Microsoft edge, it seems the appearance is not working!
can anyone help with this issue? thank you.
.form {
width: 300px;
padding: 20px;
background-color: #f5f5f5;
}
.textfield,
.select {
margin-top: 5px;
padding: 5px;
width: 100%;
}
.select {
background: #fff;
border-radius: 0;
}
<div class="form">
<div>
<label for="text">
<nobr>Text field</nobr>
</label>
<br />
<input name="text" tabindex="1" class="textfield" />
</div>
<br />
<div>
<br />
<select name="select" tabindex="2" class="select">
<option value="">-- Please Select --</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
</select>
</div>
</div>
To make the textbox and select box have exactly the same appearance style-wise, pick the style you want (i.e. something like border: 1px solid #666666 to mimic the <input> element) and apply it to both your .textfield and .select classes together.
You can use JavaScript to only apply that style when the user is on a Mac, if you want. (See this answer.)
.form {
width: 300px;
padding: 20px;
background-color: #f5f5f5;
}
.textfield,
.select {
margin-top: 5px;
padding: 5px;
width: 100%;
border: 1px solid #666666;
}
.select {
background: #fff;
border-radius: 0;
}
.asterisk {
color: #FF0004;
}
<div class="form">
<div>
<label for="text">
<nobr>Text field</nobr>
</label>
<br />
<input name="text" tabindex="1" class="textfield" />
</div>
<br />
<div>
<label for="select">
<nobr>Select<span class="asterisk">*</span></nobr>
</label>
<br />
<select name="select" tabindex="2" class="select">
<option value="">-- Please Select --</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
</select>
</div>
</div>
.form {
width: 300px;
padding: 20px;
background-color: #f5f5f5;
}
.textfield,
.select {
margin-top: 5px;
padding: 5px;
width: 100%;
border: 1px solid #666666;
}
.select {
background: #fff;
border-radius: 0;
}
.asterisk {
color: #FF0004;
}
<div class="form">
<div>
<label for="text">
<nobr>Text field</nobr>
</label>
<br />
<input name="text" tabindex="1" class="textfield" />
</div>
<br />
<div>
<label for="select">
<nobr>Select<span class="asterisk">*</span></nobr>
</label>
<br />
<select name="select" tabindex="2" class="select">
<option value="">-- Please Select --</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
</select>
</div>
</div>
I added an image as a background to the select field, some people recommended it and its working great.
simply add bellow to .select in the css:
background: #fff;
border-radius: 0;
-webkit-appearance: none;
/* **this should be your icon or image to replace the down arrow** */
background :url('http://via.placeholder.com/10x10') 95% no-repeat;
background-color: #fff;
background-position: right;
background-size: 14px;
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