I use bootstrap and try to display a select box. But the select box is not visible.
HTML:
<div class="textAlignCenter">
<select class="selectpicker" placeholder="Situation maritale" formControlName="maritalSituation">
<option value="" selected></option>
<option value="MARIE">Marié</option>
<option value="DIVORCE">Divorcé</option>
<option value="CELIBATAIRE">Célibataire</option>
<option value="VEUF">Veuf</option>
</select>
</div>
CSS:
.textAlignCenter {
text-align: center;
border: 1px solid red;
}
Here is the fiddle: https://jsfiddle.net/flamant/awrb4Lxz/3/
Select elements don't work like that. To display a "placeholder", you can replace your first <option> by something like this:
<option value="" selected disabled>Situation maritale</option>
It was my browser that didn't work. I upgraded firefox with the latest version and restart and it worked. Could you please remove the negative mark please ? Thank you. The post is closed
Related
I have following markup that renders HTML dropdown. On my web page the dropdown is placed at extreme right side of the container. Dropdown contains some lengthy text.
When open in chrome, dropdown opens correctly starting from right towards left, thus showing the lengthiest option clearly. Where in firefox dropdown starts off from left towards right, thus some of the option text goes out of the screen.
Is there any way/css to change this behavior in firefox.
<div style="float:right;">
<select id="select_1" style="width:100px;" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</div>
Just use this may help you
#-moz-document url-prefix() {
select {
direction: rtl;
}
option{
text-align: left;
}
}
The problem is caused by setting the select element with a fixed width (100px)
Remove that and the select element will work correctly in all browsers.
Fiddle
If it's important for you to keep the width, then you can use firefox-only CSS to change the width back to auto in Firefox.
NB: It is generally frowned upon to rely on hacks like these in production code. Use with caution!
Fiddle
select {
width: 100px;
}
/* firefox-only CSS..
WARNING: Use at your own risk */
#-moz-document url-prefix() {
select {
width: auto;
}
}
<div style="float:right;">
<select id="select_1" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</div>
Anyone know what's causing this extra left 'padding' on the input? The inspector isn't reporting that anything is actually causing it. Can't say I've run into this issue before…
The top field is a text input (search), the bottom field is a select
Apparently the HTML code is the key to solving the problem, here you go:
<input type="search" placeholder="Search" />
<select>
<option value="ir35">IR35</option>
</select>
Edit to add:
I was a bit of a doofus, but the problem still remains. In experimenting with different input types I'd created two templates. The isse is actually on an input[type="search"] - NOT text. This is an issue with the search type. However I am already applying -webkit-appearance: textfield is there something else I'm missing? There's no actualy 'thing' causing the padding, text indent, padding, etc. It's just 'there'.
Edit:
My solution will be dropping search in favour of text - it's a workaround but it'll do.
select elements and input elements operate, I believe, under different box-models.
box-sizing:border-box is the default on select elements.
You can check this by looking in the "Computed Styles" when using Developer Tools
Setting box-sizing:border-box on both should fix it.
DEMO Without
select,
input {
display: block;
width: 200px;
}
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
<input type="text" />
DEMO With
select, input {
display: block;
width: 200px;
box-sizing:border-box;
}
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
<input type="text" />
The styling of certain form elements like input and select is not specified in the CSS specification and is left up to the discretion of the browser developer, so there will be slight style variations across browsers.
In Firefox, you can make some hard-coded style adjustments to fix the padding issue that you are seeing.
For example, if you add padding-left: 3px to the input field, then the text value will line up with the option value displayed in the select box.
However, since padding cannot be negative, you can eliminate the left padding in the select element, though you can in the option element.
select,
input {
display: block;
width: 200px;
box-sizing: border-box;
}
select {
padding-left: 0px;
}
input {
padding-left: 3px;
}
<input type="text" value="Option 1" />
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
I want to give ListBox width in HTML5.
Please give me some idea.
You can style it as a regular input - all CSS properties applicable to it
DEMO
CSS
input[list] {
width: 300px;
}
HTML
<input type="text" list="browsers" />
<datalist id="browsers">
<option> Chrome </option>
<option> Firefox </option>
<option> IE9 </option>
</datalist>
You can try with
style="width:150px;"
CSS
#example {
width: 300px;
}
HTML
<select size="4" id="example" name="example">
<option selected>Fries</option>
<option>Drink</option>
<option>Pie</option>
<option>Salad</option>
<option>Shake</option>
</select>
For completeness and to show an actual HTML5 Listbox (no JS needed).
I have a basic html select:
<select>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Grape</option>
</option>
I want to set the background colour of each option to a different one. For instance, Apple is red, Banana is yellow and Grape is purple. By initiating a drop down, I will see the different colours in each option.
Is it possible to achieve the above with CSS3/HTML5 on the latest Firefox and Webkit(Chrome and Safari) browsers?
NOTE: Can you test your solutions on both the latest Firefox and Chrome, possibly on the Mac? I'm aware of the background colour method but it only works in Firefox on the Mac.
Is it not just as easy as this? http://jsfiddle.net/d8p8Q/
<select>
<option value="1" style="background:red">Apple</option>
<option value="2" style="background:yellow">Banana</option>
<option value="3" style="background:purple">Grape</option>
</select>
Am I missing something here?
Safari Chrome (and I'm using Windows 7)
"Grape" is blue because that's the one I'm hovering over. I don't think it's possible to change that blue "selected" colour using the native <select> element.
If that's what you're after doing, you'll have to swap out the <select>s with JavaScript replacements, such as these:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
/* Style */
select option[value="1"] {
background-color: #f00;
}
select option[value="2"] {
background-color: #0f0;
}
select option[value="3"] {
background-color: #00f;
}
<!-- HTML -->
<select>
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
Of course it would be easier to target with classes, but this should get you started.
Like this? http://jsfiddle.net/3HWUw/1/
HTML:
<select>
<option id="one" value="1">Apple</option>
<option id="two" value="2">Banana</option>
<option id="three"value="3">Grape</option>
</select>
CSS:
#one {
background-color: red;
}
#two {
background-color: yellow;
}
#three {
background-color: green;
}
The above works, or you can do it in CSS like this:
http://jsfiddle.net/JmwJ9/
One of our customers has a hard time reading the grey text in disabled controls in our web-based application:
We would like to change the style to a light grey background and a black text. Unfortunately, most browsers (including IE, which is what the customer is using) ignore the color: ... CSS attribute on disabled controls, so we cannot change the foreground color.
For text boxes (input type="text"), this can easily be workarounded by using the readonly instead of the disabled attribute. Unfortunately, this is not an option for dropdowns (select) or checkboxes (input type="checkbox").
Is there an easy workaround for that? Preferebly one where the control does not need to be replaced by another type of control? (...since our controls are rendered by ASP.NET)
PS: Using the [disabled] selector in CSS does not make a difference.
In Internet Explorer 9, support will be added for the :disabled pseudo-selector (ref). I don't know whether that will honor the "color" property, but it seems likely.
In older versions of IE, you can adjust the background color (but not the color). Thus:
<style type="text/css">
select[disabled] { background-color: blue; }
</style>
That works in IE 7 and IE 8. You still can't alter the foreground color, but you can change the background color to contrast more strongly with the gray that IE assigns it when it's disabled.
This worked for me in webkit and Firefox
select:disabled{
opacity: 0.6;
}
For those still finding this.
Not working:
select[disabled] { background-color: blue; }
Working:
select option [disabled] { background-color: blue; } will do
This worked for me
select[disabled='disabled']::-ms-value {
color: red;
}
Sorry for my english...
That's not possible using css just, IE doesn't allow change properties of a disabled select tag
You can try the following:
<style>
/*css style for IE*/
select[disabled='disabled']::-ms-value {
color: #555;
}
/*Specific to chrome and firefox*/
select[disabled='disabled'] {
color: #555;
}
</style>
I know this is question is old but this code worked well for me.
It allowed for full control of text and background color. I used this code with a disabled select control whose value is set based on a value from another select. I didn't want to see the grayed background, especially when the value had not yet been set.
CSS
<style>
.whatever-control:disabled, .whatever-control[readonly] {
background-color: white;
opacity: 1;
color: blue;
font-weight: bold;
}
</style>
Form
<select id = "SelectState" name="SelectState" class="whatever-control" disabled="disabled">
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DC">District of Columbia</option>
<option value="DE">Delaware</option>
<option value="FL" selected="selected">Florida</option>
<option value="GA">Georgia</option>
</select>
You can try,
option:disabled{
opacity: 0.6;background-color: #ff888f;
}
<select id="HouseCleaningEmp" onChange="myCalculater()">
<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" disabled>option 5 </option>
<option value="6" disabled>option 6 </option>
<option value="7">option 7 </option>
<option value="8">option 8 </option>
</select>