I have the flora forms form and I can't get the element (located on the flo-select:before on css) to move it to the left side.
Here's what i have right now:
And here's what i want to acheive:
Here's the HTML code:
Here's a LIVE One: Live Demo
.floraforms .flo-select>select::-ms-expand {
display: none
}
.floraforms .flo-select:after,
.floraforms .flo-select:before {
content: '';
position: absolute;
pointer-events: none;
z-index: 15;
}
.floraforms .flo-select:before {
top: 2px;
right: 2px;
width: 34px;
bottom: 2px;
background: #F2F4FA;
border-left: 1px solid #d3dae7;
-webkit-border-radius: 0 1px 1px 0;
-moz-border-radius: 0 1px 1px 0;
-o-border-radius: 0 1px 1px 0;
border-radius: 0 1px 1px 0;
}
<div class="elem-group colm colm6">
<label class="field flo-select">
<select id="month" name="month">
<option value=""> Select month </option>
<option value="01">01 - Jan</option>
<option value="02">02 - Feb</option>
<option value="03">03 - Mar</option>
<option value="04">04 - Apr</option>
<option value="05">05 - May</option>
<option value="06">06 - Jun</option>
<option value="07">07 - Jul</option>
<option value="08">08 - Aug</option>
<option value="09">09 - Sep</option>
<option value="10">10 - Oct</option>
<option value="11">11 - Nov</option>
<option value="12">12 - Dec</option>
</select>
<i class="arrow double"></i>
</label>
</div>
Related
I have three select controls and would like them to group inside fieldset like style but without using fieldset. Like in my image,
I have following style to make text field appear like fieldset,
border-radius: 6px;
border: none;
font-weight: bold;
background: none;
box-shadow: none;
border: 2px solid #e4e4e4;
width: 100%;
padding: 25px 5px 5px 10px;
Gives me style like,
Edit:
HTML,
<div id="divPrice" class="margin-all">
<div class="editor-field">
<input data-val="true" data-val-number="The field Price must be a number." data-val-required="The Price field is required." id="Price" maxlength="6" name="Price" type="text" value="20.00" class="hasText input-validation-error" aria-required="true" aria-invalid="true" aria-describedby="Price-error">
<label for="Price">Price</label>
</div>
</div>
Ive created a jsfiddle for you: jsfiddle.net/by6rst01/1/
You can try something like this:
.fieldset {
border: 2px groove threedface;
border-top: none;
padding: 0.5em;
margin: 1em 2px;
}
.fieldset>h1 {
font: 1em normal;
margin: -1em -0.5em 0;
}
.fieldset>h1>span {
float: left;
}
.fieldset>h1:before {
border-top: 2px groove threedface;
content: ' ';
float: left;
margin: 0.5em 2px 0 -1px;
width: 0.75em;
}
.fieldset>h1:after {
border-top: 2px groove threedface;
content: ' ';
display: block;
height: 1.5em;
left: 2px;
margin: 0 1px 0 0;
overflow: hidden;
position: relative;
top: 0.5em;
}
<div class="fieldset">
<h1><span>Must Add By</span></h1>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
I have added css styling to my select elements. However, as you can see below the element now has a white toggle button and a black one. How can I get rid of the black one?
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 29px;
overflow: hidden;
width: 240px;
}
.semi-square {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<select class="styled-select yellow semi-square" (change)="getLocations()" id="interest">
<option value="default">Select your interest</option>
<option value="movie_theater">Movie Theaters</option>
<option value="movie_rental">Movie Rental</option>
</select> within
<select class="styled-select yellow semi-square" (change)="getLocations()" id="distance">
<option value="2500" selected>2,5</option>
<option value="5000">5 </option>
<option value="10000">10</option>
<option value="20000">20</option>
</select> kilometers <br />
Add -webkit-appearance: none; to select
See this
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 29px;
overflow: hidden;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
}
.semi-square {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<select class="styled-select yellow semi-square" (change)="getLocations()" id="interest">
<option value="default">Select your interest</option>
<option value="movie_theater">Movie Theaters</option>
<option value="movie_rental">Movie Rental</option>
</select> within
<select class="styled-select yellow semi-square" (change)="getLocations()" id="distance">
<option value="2500" selected>2,5</option>
<option value="5000">5 </option>
<option value="10000">10</option>
<option value="20000">20</option>
</select> kilometers <br />
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 trying to add in an icon to the end of a select group. I've abs positioned the pseudo element but I'm unable to see it.
Markup:
<select id="signup-sector" name="signup-sector" class="signup-select">
<option value="sector">Sector</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
CSS:
select.signup-select::after {
content: "\f107;";
position: absolute;
top: 5px;
right: 5px;
font-size: 20px;
color: black;
}
The select has a position relative set.
Thanks
here is what i do, try this..
hope this may help you...
.signup-select:after {
content: "";
position: absolute;
right: 10px;
top: 3px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}
<select id="signup-sector" name="signup-sector" class="signup-select">
<option value="sector">Sector</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
I have custom dropdown in my web page. The dropdown is displayed perfectly in 4 major browsers i.e. Chrome, Mozilla, IE9, Safari. However, the image of dropdown is not shown in opera. What should I do to rectify it?
This is my html.
<div style="width:172px;">
<div class="blue" style="float: left; width:100%;">
<div class="lightblueHeading" style="text-align: left;">
No. Of Guests
</div>
<div>
<div class="styled-select">
<select name="ctl00$cphMain$ddlNoOfGuest" id="cphMain_ddlNoOfGuest" style="width: 165px;">
<option value="-1">No. of Guests</option>
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</div>
</div>
</div>
<span id="cphMain_cmpval_NoOfGuest" class="validation" style="float:left;display:none;">* - the field is required</span>
</div>
CSS
.blue {
border: 1px solid #74A4CA;
}
.lightblueHeading {
font-size: 12px;
background-color: #74A4CA;
color: white;
border: 1px solid #74A4CA;
padding-left: 4px;
}
.styled-select {
overflow: hidden;
background: url(../images/signup-dropdown_icon.png) no-repeat right;
background-color: white;
width: 100%;
background-position: 100%;
display: inline-block;
}
.styled-select select {
background: transparent;
width: 110% !important;
line-height: 1;
border: 0;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none !important;
appearance: none;
font-size: 12px;
float: left;
}
Opera does not support transparent select background. Try this:
.styled-select select {
background: rgba(0,0,0,0);
background: transparent;
.
.
.