On my site css file i have it so all form input backgrounds (textareas, dropdowns etc) have a background color black attribute.
However on one page I'm trying to do a color section dropdown, with the background of each option a different color, eg: blue
This works, when the dropdown is opened, but when i select it, it doesnt show the background color in the currently selected field. Im not sure if the CSS is overriding it or what.
Anyone know how to bypass this?
(Tried to explain best I could)
This is in my css file:
input,textarea,input,select,input,checkbox {
font-size:12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
color:#98925C;
background-color:#000;
border:1px solid #413E22
}
and the code im using on my html page to make the form:
<select size="1" name="color">
<option value=blue style='background-color:blue'>blue</option>
<option value=red style='background-color:red'>red</option>
</select>
etc
When the <select> is open, you are seeing the <option> elements and their respective background colors. When you select an option, the <select> element closes its options, leaving you looking at only the <select> element. It makes sense that the <option> background-color does not affect the closed <select> element.
That being said, this looks like a solution:
<select onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
Related
I'm trying to make dropbox or comboBox with select-option
I want to put space between select and first child(option).
I tried
<select>
<option style={{ marginTop: "100px" }} value="Test">test</option>
<option value="Test">test</option>
</select>
But failed.
Any ideas?
There are only a few style attributes that can be applied to an element.
This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.
Unfortunately, webkit browsers do not support styling of option tags yet.
you may find similar question here
How to style a select tag's option element?
Styling option value in select drop down html not work on Chrome & Safari
The most widely used cross browser solution is to use ul li
Hope that helps!!!!
I'm having a graphical problem with a select box in a page of my website.
The problem is that the option elements of the select is showing inline instead as a drop-down selection. This strange behaviour becomes only if I render the select element inside a form element. (??I don't know why??)
The HTML output produces:
<form name="add-user-form" method="POST" action="/index.php/admin/happen/add"><p><select name="day" required><option value>d</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</p>
</form>
is a valid html5 markup, checked on w3c website.
this is an image showing the problem..
I omit the php code for now, somebody know this problem?
As we said in the comment, the issue is due to a CSS class using the following :
form[name] * {
display: inline-block;
}
I have an HTML5 <select> with several <option> children, where each <option> has its own back and foreground colors. This is done via CSS and is easy enough.
What I would like to do is to maintain the <option> color in the <select> after the <option> has been selected. For example, let's say I have this (I'm not using CSS in the simple example below but in my real environment I am):
<select>
<option style="color:red">ABC</option>
<option style="color:blue" selected>DEF</option>
<option style="color:green">GHI</option>
</select>
I would like to use CSS to somehow "transfer" the back and foreground colors of the chosen <option> to the <select> so that the <select> color is always in synch with the color of the chosen <option>. If the user selects the third option in my example, it should appear green when selected. Choosing the first option and the text appears red. When the <select> is initially displayed, it should have the back and foreground colors of the initial <option> (blue foreground, in the example above).
I can do this through jQuery but I'd prefer to use CSS but I feel it probably can't be done.
I have a solution I am happy with at the jsfiddle provided. The one caveat is that each <option> must have a background color set explicitly (it cannot inherit from the <select> as the <select> will have its background color changed as the selected <option> changes).
UPDATE Unfortunately, this "solution" only works in Chrome and Opera. So much for browser compatibility.
https://jsfiddle.net/herm0xvb/1/
You have to manually get CLASS and COLOR from selected option element
$(document).ready(function(){
$('select').change(function() {
var opt = $(this)[0].options[$(this)[0].selectedIndex];
$(this)[0].style.backgroundColor = opt.style.backgroundColor;
$(this)[0].className = opt.className;
});
});
I have code like this
<div>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<select>
</div>
The div has a background image which should be visible through the select box. The issue I have is with IE7 where I am not able to set the background color of the select element to transparent.
EDIT: the image is only the down pointing arrow. The text is real text.
I have used this CSS but it doesn't work
background-color:transparent
Here is a screenshot to help better understand
Have you tried this?
.transparent {
filter: alpha(opacity=0);
opacity: 0;
}
IE7 is not really your best friend when it comes to web development. There are a lot of things that will not work.
There are however some good javascript plugins that you can use to override the default styling.
I personally use this one at work. when I need to support IE7 with custom dropdowns.
Since you are using an image to display text, try setting the font-size to 0px:
font-size:0px
Raised from the dead but maybe helpful for others coming across this.
Use this meta, which has to be the first thing under the head
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
This should work.
I am trying to create a alternative style to the select list on mobile. What I want is use my own styled button to activate the select list options. On iPhone and Android this gives you a popup with the options. I got this working by applying the button styles to the label for the select element. However, I am unable to properly hide the select element from view without also disabling its functionality. Does anyone know how to do this?
My html looks like this:
<label class="button-sort">
<select>
<option>Option 1</option>
<option>Option 1</option>
</select>
</label>