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>
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 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>
Inside the spacing-container div, I'm setting an image to appear to the right-hand side of the options, the image is a line spacer icon. However, when I set this icon it's just a big black mark. I've tried resizing it but not got very far with it. The icons which I'm using in the two other divs are working, which display a drop-down icon.
Further, I was hoping to store the icons locally, but when I set the icons they do not come through when I set the background to find the images locally. My file structure is as follows:
CSS
--> CssImages
--> -- down-chevron.png
--> -- line-spacing.png
main.css
and I was importing them in this format in my css file.
background: transparent url("CSS/CssImages/down-cheron.png")
Unfortunately this didn't seem to work, however, upon inspecting in developer tools the images were being pulled through to the local host.
My HTML is here:
<div class="tool-bar">
<div class="options-container">
<select>
<option value = "times-new-roman">Times New Roman</option>
<option value = "arial">Arial</option>
<option value = "courier-new">Courier New</option>
<option value = "verdana">Verdana</option>
</select>
</div>
<div class="options-container font-container">
<select>
<option value = "8">8</option>
<option value = "10">10</option>
<option value = "12">12</option>
<option value = "14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
</select>
</div>
<div class="options-container spacing-container">
<select>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
</select>
</div>
</div>
My Css snippet is here:
.tool-bar {
width: 100%;
height: 100%;
background-color: #a19f9f;
float: left;
display: inline;
}
.options-container {
padding: 10px;
width: 20%;
border-left: 3px solid #aaaaaa;
background-color: #ffffff;
float:left; display:inline;
}
.font-container {
width: 5%;
}
.spacing-container{
width: 6%;
}
.options-container select {
width: 100%;
font-size: 20px;
border: 0;
line-height: 1;
height: 34px;
outline: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat center;
display: block;
margin-right: 5px;
-webkit-appearance: none;
background-position-x: 215px;
}
.font-container select {
background-position-x: 20px;
}
.spacing-container select {
background: url("https://image.flaticon.com/icons/svg/1827/1827633.svg") 0 0;
background-position-x: 0;
}
I appreciate your time and your advice with the matter.
Thank you,
The icon you are using is too big, that's why it is not visible. So, you have to use background-size property.
.tool-bar {
width: 100%;
height: 100%;
background-color: #a19f9f;
float: left;
display: inline;
}
.options-container {
padding: 10px;
width: 30%;
border-left: 3px solid #aaaaaa;
background-color: #ffffff;
float:left; display:inline;
}
.font-container {
width: 10%;
}
.spacing-container{
width: 10%;
}
.options-container select {
width: 100%;
font-size: 20px;
border: 0;
line-height: 1;
height: 34px;
outline: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat center right;
display: block;
margin-right: 5px;
-webkit-appearance: none;
}
.font-container select {
background-position-x: 100%;
}
.spacing-container select {
background: url("https://image.flaticon.com/icons/svg/1827/1827633.svg") no-repeat center;
background-position-x: 100%;
background-size: 20px;
}
<div class="tool-bar">
<div class="options-container">
<select>
<option value = "times-new-roman">Times New Roman</option>
<option value = "arial">Arial</option>
<option value = "courier-new">Courier New</option>
<option value = "verdana">Verdana</option>
</select>
</div>
<div class="options-container font-container">
<select>
<option value = "8">8</option>
<option value = "10">10</option>
<option value = "12">12</option>
<option value = "14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
</select>
</div>
<div class="options-container spacing-container">
<select>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
</select>
</div>
</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 got a question regarding browser zoom and my select box. I have created a custom select box with the current HTML and CSS code (JSFIDDLE):
.custom-select {
position: relative;
width: 100px;
display: inline-block;
}
.custom-select select {
width: 100%;
padding: 8px 5px 8px 10px;
height: 36px;
border: 1px solid #cacaca;
color: #0085c8;
}
.custom-select.svg > svg.dropdown-button {
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 34px;
background-color: #fff;
background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png);
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
border: 1px solid #cacaca;
color: #0085c8;
display: inline-block;
}
<div class="custom-select svg">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="Volkswagon Polo">Volkswagon Polo</option>
</select>
<svg class="dropdown-button"></svg>
</div>
Whenever you scale down your browser to for example 75% I get the following situation:
Where the word POLO is cutoff. What am I doing wrong? This should not be zooming sensitive right? Can you set CSS styling to specific zoom levels?
--EDIT
Increasing the width is not an option due to the fact that the select is been placed inside a div with a maximum width of 150px
You can try with giving auto width to your custom select box.
.custom-select
{
position: relative;
width:100px;
display:inline-block;
overflow:hidden
}
.custom-select select{
width:auto;
padding: 8px 5px 8px 10px;
height:36px;
border: 1px solid #cacaca;
color: #0085c8;
}
.custom-select.svg > svg.dropdown-button
{
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 34px;
background-color: #fff;
background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png);
background-repeat:no-repeat;
background-position:center;
pointer-events: none;
border: 1px solid #cacaca;
color: #0085c8;
display:inline-block;
}
<div class="custom-select svg">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="Volkswagon Polo">Volkswagon Polo</option>
</select>
<svg class="dropdown-button"></svg>
</div>