Regarding this question and this question, My problem still hasn't been solved.
The solution removed everything including the values, arrows and borders.
My code goes like this.
.form-control {
display: block;
width: 100%;
height: 28px;
padding: 6px 12px;
font-size: 12px;
line-height: 12;
color: #666;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
margin-top:5px;
-webkit-appearance:caret;
}
<select class="form-control" value="number">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
if you intend to re-style the select input, you can implement -webkit-appearance: none, and add your own style:
.custom-select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 2px solid #333;
padding: 10px;
min-width: 200px;
border-radius: 0;
/* Add your own arrow image and set it as a background image */
}
<select class="custom-select" value="number">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
The method above will work on -webkit based browser like chrome, safari. But in firefox there still a bug, it's still showing the ugly arrow.
Related
I have one form in which I have one field for City Name
I am facing one issue with the down-arrow alignment, currenlty I have aligned that to the right with background property
something like this
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right white;
but you can see its touching the border of an div, I want to add some spacing from the right
so that I have an equal spacing
I have tried adding padding, margin, left and right properties but the whole div get move of city code
can someone tell me what's the exact issue with this?
EDIT:
added code snippet
.cityName {
display: flex;
max-width: 300px;
margin: 0 auto;
}
.form-inputs{
background: #FFFFFF;
border-radius: 5px;
height: 50px;
width: 100%;
padding: 0 10px;
font-weight: normal;
font-size: 18px;
line-height: 21px;
color: #445566;
margin-bottom: 10px;
}
.cityName select {
width: 90px;
margin-left: 10px;
}
.cityName select.city-short{
position: relative;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right white;
background-size: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<label for="lastName" class="cityName">
<input type="text" id="cityName" placeholder="Enter City Name" class="city validated form-inputs">
<select class="city-short form-inputs">
<option selected="" value="" >NA
</option>
<option selected="" value="" >US
</option>
</select>
</label>
You can add background position size for background property like:
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right 10px center white
I want to keep the background color of the input field as 'green', the problem is that when I click on it to write something, the color changes to default white again, here is my CSS code:
input{
width: 100%;
color: $white;
border: none;
border-bottom: 1px solid $grey-light;
outline: none;
font-size: 1rem;
margin-bottom: 1.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: $green;
}
the HTML React part:
<form className="form">
<input type="text" name="name" className="form__name" placeholder="Name*"/>
<input type="email" name="email" className="form__email" placeholder="Email*"/>
</form>
You could use input:focus to keep the background green while typing. Make sure you do not have other css which is overriding this css.
Demo:
input {
width: 100%;
color: white;
border: none;
border-bottom: 1px solid grey-light;
outline: none;
font-size: 1rem;
margin-bottom: 1.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: green;
}
input:focus {
background: green;
}
<form class="form">
<input type="text" name="name" class="form__name" placeholder="Name*" />
<input type="email" name="email" class="form__email" placeholder="Email*" />
</form>
I think you have to use the :focus Property.
So like that:
input:focus {
background: #161616;
}
Use input:focus below input to write your css rules for the focus scenario.
I'm creating a dropdown menu box and arrow. It looks good except one thing. I used :focus so when user is on select the box, it will turn to green. Yes, box is turning to green but when I do the same thing for arrow icon, it is not changing. Can someone help me with this?
All help will be appreciated.
I have searched some solution on the internet but could not fix the problem.
input[type=text],
input[type=tel],
input[type=email] {
width: 100%;
padding: 5px 5px;
height: 40px;
box-sizing: border-box;
border: 2px solid #A9A9A9;
}
/* user input and dropdown turning to green color when active */
input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
select:focus,
textarea:focus {
width: 100%;
padding: 5px 5px;
height: 40px;
box-sizing: border-box;
border: 2px solid #42AC82;
}
/* dropdown box styling */
select {
width: 100%;
padding: 5px 5px;
height: 40px;
box-sizing: border-box;
border: 2px solid #A9A9A9;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
.select-container {
position: relative;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.select-arrow {
color: #A9A9A9;
right: 0px;
top: 7px;
width: 30px;
position: absolute;
display: block;
z-index: 10;
margin: 0 0 0 0;
pointer-events: none;
}
select:required:invalid {
color: gray;
}
select[value=""][disabled] {
display: none;
}
<div class='grid'>
<div class='col col-1-of-4'>Is desicion maker?<br>
<div class="select-container">
<span class="select-arrow fa fa-caret-down" style="font-
size: 1.5em;"></span>
<select name="options" required>
<option value="" disabled selected>Select an option
</option>
<option value="1">yes</option>
<option value="2">no</option>
</select>
</div>
</div>
</div
The reason why you're not seeing the arrow color change is that the arrow icon is not a children or next sibling of select element and there's no CSS selector for previous/ parent element. The way I see it you have two options there:
1) Move you arrow icon after select:
<select name="options" required>
<option value="" disabled selected>Select an
option</option>
<option value="1">yes</option>
<option value="2">no</option>
</select>
<span class="select-arrow fa fa-caret-down" style="font-
size: 1.5em;"></span>
Which should you allow to use + (next sibling) selector
select:focus + .select arrow { color: #42AC82 }
2) Use JS to detect select element focus and toggle class select-container element what would allow you to style all child elements as you need
Try add some of your css like this part:
input[type=text]:focus ~ span ,
input[type=tel]:focus ~ span ,
input[type=email]:focus ~ span ,
select:focus ~ span ,
textarea:focus ~ span {
color: red;
}
And transfer your span with icon after select tag like this:
<select name="options" required>
<option value="" disabled selected>Select an option</option>
<option value="1">yes</option>
<option value="2">no</option>
</select>
<span class="select-arrow fa fa-caret-down" style="font-size: 1.5em;">
</span>
I am trying to build a select menu and I am using Bootstrap 4. I replaced background to replace arrow icon in select element, but now I need to add border left to that image, I am not finding anyway.
For reference, I am attaching Image of what's required
and this is what I have achieved so far
and code I did till now
HTML
<select class="custom-select">
<option disabled>Choose 1</option>
<option>another</option>
<option>2</option>
</select>
And this is my CSS
.custom-select {
background: #fff url("/assets/images/down-arrow.png") no-repeat right 0.75rem center;
background-size: 12px 12px;
}
You can use another image for the line in the background as well or make a combined image of arrow and line
Stack Snippet
.custom-select {
background: url("https://image.flaticon.com/icons/png/128/118/118738.png") no-repeat right 0.75rem center, url("http://www.i2symbol.com/images/symbols/brackets/presentation_form_for_vertical_low_line_uFE33_icon_128x128.png") no-repeat right 2rem center;
background-size: 12px 12px;
width: 300px;
height: 40px;
-webkit-appearance: none;
position: relative;
padding: 0 10px;
}
<select class="custom-select">
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
Wrap the select in another DIV (eg. custom-select-wrapper) and use a CSS psuedo element for the border...
https://www.codeply.com/go/edxDmWNLx6
<div class="custom-select-wrapper">
<select classs="custom-select">
<option>opt1</option>
<option>opt2</option>
<option>opt3</option>
</select>
</div>
CSS
.custom-select-wrapper {
position: relative
}
.custom-select-wrapper:after {
border-left: 2px solid #ccc;
content:"\00a0";
position: absolute;
top: 0;
right: 46px;
z-index: 2;
display:block;
height: 38px;
}
I suggest you wrap the select in a div and add an after to it
<div class="select-wrapper">
<select class="custom-select"></select>
</div>
Than, in CSS you add the arrow with an after
.select-wrapper {
position: relative;
background: #fff;
z-index: 1;
}
.select-wrapper select {
background: transparent;
}
.select-wrapper:after {
position: absolute;
z-index: -1;
top: 2px;
right: 0;
bottom: 2px;
width: 12px;
background: #fff url("/assets/rogers/images/down-arrow.png") no-repeat right 0.75rem center;
background-size: 12px 12px;
border-left: 1px solid #ddd;
}
I couldn't test the code, because you didn't share your HTML, so I just gave you an example.
Or than you can add the line to the arrow image
I have one multiple select with some options inside.
select {
overflow-y:scroll;
height: 200px;
border: 1px solid #c4c7cc;
border-radius: 20px;
margin: 0;
padding: 10px;
color: #323232;
width: 100%;
transition: border-color 0.25s ease;
font-size: 12px;
}
select:not([disabled]):hover,
select:not([disabled]):focus {
border-color: #ff7900;
}
select[disabled] {
opacity: 0.5;
}
<div>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
My preference is to use default scrollbar and always show vertical scrollbar. But my select has border-radius so when running, the vertical scrollbar hides select's top-right and bottom-right corner.
This works well in IE11 because there is enough space in IE11 for the scrollbar not hiding the corners. But in Chrome, it overlays.
I have tried ::-webkit-scrollbar but it always ask me to use customized scrollbar, which I don't want.
So the question is how to make space in select between scrollbar and the border?
https://jsfiddle.net/x2eqqhqy/
I set border to the parent div instead of select and get the result below.
div {
height: 200px;
border: 1px solid #c4c7cc;
border-radius: 20px;
padding: 10px;
width: 100%;
transition: border-color 0.25s ease;
}
select {
height: 200px;
border:none;
color: #323232;
width: 100%;
font-size: 12px;
}
div:hover{
border-color: #ff7900;
}
<div>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
To hide the corners you must set border-radius on parent, with overflow:hidden. Don't set height on parent. In short, <select> elements are difficult to style cross-browser. Every single select/dropdown library hides the <select> and draws a surrogate using easier to style elements (typically divs and spans) and than copies the selection to the hidden <select>, using JavasScript.
Here's the closest to what you want, without using a plugin:
select {
overflow-y: scroll;
height: 200px;
margin: 0;
padding: 10px;
color: #323232;
width: 100%;
font-size: 12px;
border-radius: 20px;
border-color: transparent;
outline: none;
}
select[disabled] {
opacity: 0.5;
}
div {
border: 1px solid #c4c7cc;
border-radius: 20px;
transition: border-color 0.25s ease;
overflow: hidden;
}
div:hover,
div:active {
border-color: #ff7900;
}
<div>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
Apply same border-radius to parent and give overflow: hidden like this:
div {
border-radius: 20px;
overflow: hidden;
}
select {
border-radius: 20px;
}