I want change the default style for a select multiple html tag.
I need apply an inline-block style and align center for the options, but when i apply this styles, the options don't break to a new line.
<select name="select" id="select" multiple size="3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
<select/>
select {
width: 200px;
height: 200px;
text-align: center;
background: yellow;
display: block;
}
option {
width: 50px;
margin: 5px;
padding: 10px 5px;
border: 1px solid #000;
border-radius: 5px;
display: inline-block;
}
here is the code:
https://codepen.io/gpuente/pen/NXeoRN
The box 1 is the select, and the box 2 is the result that i need.
Add white-space:normal in your select
select {
width: 200px;
height: 200px;
text-align: center;
background: yellow;
display: block;
white-space: normal;
}
https://codepen.io/RACCH/pen/ypGwNq
Related
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.
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 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've got a one-line form that I need to style as follows:
Label is left aligned
Select box is fluid width
Link is right-aligned (with a fixed right margin)
What CSS should I use to keep each of the text fields on one line (bearing in mind the text length might change) and make the select box auto-fill the rest of the space?
Flexbox can do that
.wrapper {
display: flex;
border: 1px solid grey;
width: 90%;
margin: 1em auto;
align-items: center;
}
label {
padding: 1em;
}
select {
margin-right: 1em;
flex: 1;
}
a {
margin-left: auto;
margin-right: 50px;
padding: 0 1em;
text-decoration: none;
}
<div class="wrapper">
<label for="">Label</label>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Some random text
</div>
<div class="wrapper">
<label for="">Label</label>
<select>
<option value="mercedes">Mercedes</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
</select>
Some longer random text
</div>
CSS Table Layout
.wrapper {
display: table;
border: 1px solid grey;
width: 95%;
margin: 1em auto;
}
label {
display: table-cell;
padding: 1em;
width: 1%;
}
select {
display: table-cell;
width: 100%;
padding-right: 1em;
}
a {
display: table-cell;
text-decoration: none;
width: 1%;
padding-left: 1em;
padding-right: 50px;
white-space: nowrap;
}
<div class="wrapper">
<label for="">Label</label>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Some random text
</div>
<div class="wrapper">
<label for="">Label</label>
<select>
<option value="mercedes">Mercedes</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
</select>
Some longer random text
</div>
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;
.
.
.