Drop down values are showing up in IE10. How to customize it - javascript

I am using IE 10 browser. I have created one drop down menu with some values added to it. Code working fine in Chrome as my requirement but in IE10 drop down values are showing up. How to customize that to look like chrome. and selector(round marked in image) also not looking like the one looks in Chrome.
the above image shows the values in dropdown are showing up in IE10.Ignore any values mismatch inside both dropdowns(they are hardcoded).
Here is my code and both CSS and Jsp are in same file
File.jsp
<div class="row">
<div class="large-5 medium-8 small-12 columns"
id="Area_dropdown_label">
Area of Business
<select class="no-highlight"
id="Area_dropdown" name="Area"
<option value="select" selected="selected">Select</option>
<option value="Drive">Drive</option>
<option value="Front">Front</option>
<option value="Kitchen">Kitchen</option>
<option value="McCafe">McCafe</option>
<option value="Back">Back</option>
</select>
</div>
</div>
.ie #Area_dropdown{
cursor: default;
display: block;
position: relative;
top: 0;
height: 2.3125em;
margin-bottom: 1.25em;
margin-top: 0px;
padding: 0px;
width: 100%;
background: linear-gradient(to bottom, #ffffff0%, #f3f3f3 100%);
box-shadow: none;
font-size: 0.875em;
vertical-align: top;
border: solid 1px #cccccc;
}
if my css code itself wrong then please suggest me to change. Any kind of suggestions/help are welcome and useful for me. Please comment for any clarification on this question.

Related

How to apply Bootstrap 4 select styling on dropdown links eg: a tags

What I want:
To apply bootstrap 4 form styling such as form-control, custom-select, to actual links(dropdown a tag)
like this:
<select class="custom-select" onchange="location = this.value;">
<option selected>Choose a website</option>
<option value="google.com">google</option>
<option value="apple.com">apple</option>
<option value="amazon.com">amazon</option>
</select>
the styling is perfect and it works as intended but it's not actual links, What I really want is for it to be actual links but with the select styling, A tag, like this:
<select class="custom-select"> # or class = form-control
<a href>Choose a website</a> # same styling as options but acutal links
google
apple
amazon
</select>
I did find a way but it lags the page and not as clean, here's how I did it:
<div>
Choose a website
<style>
.form-control{
height: auto;
}
</style>
<ul class="collapse list-unstyled form-control" id="ChooseWeb">
<li>
google
</li>
<li>
neflix
</li>
<li>
apple
</li>
<li>
amazon
</li>
</ul>
</div>
What is the cleanest way to do it?
To have a dropdown using only a tags, use bootstrap "Dropdown single button" component with "<a> elements".
Now to make it look like bootstrap .custom-select class, simply copy bootstraps css style of that class (.custom-select) and adapt it to the dropdown you just created, like so:
https://jsfiddle.net/5nwjmt9h/1/
Here's bootstraps css style for .custom-select:
.custom-select {
display: inline-block;
width: 100%;
height: calc(1.5em + .75rem + 2px);
padding: .375rem 1.75rem .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
vertical-align: middle;
background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat;
border: 1px solid #ced4da;
border-radius: .25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

Style for a selectbox CSS and HTML

Somebody just helped me to remove the outline of my selectbox (from my first bootstrap-django project)
Now, i wanted to ask for your help to change the border color property of the options box itself, which is blue, and i'm trying to make it yellow.
Also, for some reason when the select box has the default value, its border is yellow but after you select one of the options, it becomes darker, and i would like it to be darker from the beggining.
Here is my CSS:
.selector{
outline:none;
position:absolute;
border-radius:1rem;
margin-left:260px;
width:500px;
border-color: #C9C9C9;
height:35px;
font-size: 15px;
text-align-last: center;
color:#C9C9C9;
}
.selector:focus{
border-color:#FFD700;
box-shadow: 0 0 8px #FFD700;
}
And my HTML:
<div class="div1">
<label for="estado" class="label1">
Estado
<select class="selector" id="estado" name="estado" onchange="functionfs()" style="border-color: #C9C9C9; ">
<option style="color:black" selected="selected" value="-----">--- Ingrese un valor ---</option>
<option value="Activo" style="color:black;">Activo</option>
<option value="Inactivo" style="color:black;">Inactivo</option>
</select>
</label>
</div>
And my JS:
<script type="text/javascript">
var selector = document.getElementById("estado");
function functionfs(valor) {
selector.setAttribute("style", "color:black;");
}
</script>
I will also attach 2 images of the problem itself.
As you can see, when i select one of the two states and click it again, it becomes darker.
Thanks everyone!
Here is the solution of your darker and glowing problem:
Code selector class
. selector {
outline: none;
position: absolute;
border-radius: 1rem;
margin-left: 260px;
width: 500px;
height: 35px;
font-size: 15px;
text-align-last: center;
color: #000000;
border-color: #FFD700 !important;
box-shadow: 0 0 8px #FFD700;
}
While blue border cannot be changed as it is render by operating system
You can see here

Select drop down gives blank options in firefox

I have a select element with options inside that will not show when in Firefox.
This should be showing 3 different options. In Chrome and Safari it works fine. I've been looking for a solution and nothing seems to work. Apparently this is a bug in Firefox. Here's the html.
.select-field {
display: inline-block;
width: 100%;
background-color: #005D5D;
border-radius: .5em;
margin: 0 auto;
}
.select-field>select {
float: left;
width: 100%;
background-color: transparent;
border: 0em;
padding: .5em;
font-size: 1em;
color: white;
background: url("./menu_arrow.svg") no-repeat 97% 50%;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
<div id="games">
<div className="select-field">
<select onChange={this.props.gameProp}>
<option value="streetfighter" label="Street Fighter">Street Fighter 5</option>
<option value="tekken" label="Tekken">Tekken 7</option>
<option value="mvci" label="Marvel vs Capcom: Infinite">Marvel vs Capcom: Infinite</option>
</select>
</div>
</div>
This works totally fine if I run in Firefox, https://jsfiddle.net/prashu421/8b1w8afr/
can you share your CSS as well?
<div id="games">
<div className="select-field">
<select onChange={this.props.gameProp}>
<option value="streetfighter" label="Street Fighter">Street Fighter 5</option>
<option value="tekken" label="Tekken">Tekken 7</option>
<option value="mvci" label="Marvel vs Capcom: Infinite">Marvel vs Capcom: Infinite</option>
</select>
</div>
</div>

Toggle a hidden div when a particular dropdown option is either selected or de-selected

I was able to find an example on stackoverflow to do what I wanted. However, when I implement it in my code and select the option that the will display a hidden div, the hidden div would not appear and not sure why.
HTML:
<td class="mm1" width="40%">
<br />
<ul>
<li>
<label for="name">Please select a company below:</label>
<select class="selectmenu" id="select">
<option selected disabled class="hideoption">Please select one company</option>
<option value="0">RMG</option>
<option value="1">LMG</option>
<option value="2">CSC</option>
<option value="3">ADOC</option>
</select>
<div id="hidden_div" style="color:#B9B9B9; display:none">
If ADOC-does<br />position support UCMG?<br />
<input type="checkbox" /> YES <input type="checkbox" /> NO
</div>
</li>
</ul></td>
CSS:
/*Simple Dropdown box*/
.selectmenu{
font-family: arial, sans-serif, tahoma;
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: white;
width: 80px; /*Width of select dropdown to give space for arrow image*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
color: black;
border-radius: 2px;
padding: 5px;
border:0 !important;
box-shadow: inset 0 0 1px rgba(000,000,000, 0.5);
font-size: 1.2em;
}
Javascript:
$(function() {
$('#select').change(function(){
if ($(this).val() == "3") {
$('#hidden_div').show();
} else {
$('#hidden_div').hide();
}
});
});
I tried your code. It is working. Maybe try some alternatives. Use .css() function of jQuery to change the display from none to block and vice versa.
$(function() {
$('#select').change(function(){
if ($(this).val() == "3") {
$('#hidden_div').css('display','block');
} else {
$('#hidden_div').css('display','none');
}
});
});
Here's a screenshot to prove that it works:
Hope this helps. Goodluck!

How to do an color-picker with just a range of colors

I am trying to do something like this:
A colorpicker where you can pick some Colors, but only from this 40 colors.
I don't want to use an eventlistener for each color. I think it should be possible to do it like a <select> element, but how?
I suggest that you can use some color picker libraries like Spectrum
https://bgrins.github.io/spectrum/
This one includes color picker with variety of views and other functions and is free .
This could save a lot of time and work
I think it will be alot of tinkering to do your specific solution.
To do your solution I would do a html table containing the 40 cell, then define a color for each cell, write the code to define which one the user has selected, to later on use for what ever purpose you need.
if it was me i would use something like this:
code from: http://widget.colorcodehex.com/color-picker.html
<div style="font-family: Arial,Helvetica,sans-serif; border: solid 1px #cccccc; position: absolute; width: 240px; height: 326px; background: #ffffff; -moz-box-shadow: 0 0 6px rgba(0,0,0,.25); -webkit-box-shadow: 0 0 6px rgba(0,0,0,.25); box-shadow: 0 0 6px rgba(0,0,0,.25); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;">
<div style="background-color: #2d6ab4; position: absolute; top: 0px; left: 0px; width: 100%; height: 22px; text-align: center; padding-top: 2px; font-weight: bold; border-top-right-radius: 5px; border-top-left-radius: 5px;"><a style="text-decoration: none; color: #ffffff;" target="_blank" href="http://www.colorcodehex.com/">HTML Color Picker</a></div>
with this your can get the same result (or in my oppion a better since the user can define whatever color they would like) but your don't have to sit and do all the table-color-code and user interaction code.
/S
If you truly want it as a Select, you could just do this:
<select>
<option style="background-color:red" value="red">Red</option>
<option style="background-color:green" value="green">Green</option>
<option style="background-color:#0000ff" value="#0000ff">Blue (as hex)</option>
</select>
That requires no Javascript at all.

Categories