I'm using bootstrap and getting great consistency across all browsers and devices, except for this issue. I've just tested our customer details form on an iPad1 in both Safari AND Chrome, and get the same issue I can't replicate else where. Where has the spacing gone between the legend and the first form group?
I have 2 other legends further down the form and the div/inputs immediately after have a nice margin as expected.
To prove it is always the first LEGEND causing the problem, I simply duplicated the legend tag (second screen shot) and hey presto, the spacing between the second legend and form-group is spot on.
I cannot explain this!
<form class="form-horizontal" role="form" id="customer-form" action="#" method="get">
<fieldset>
<legend>To Purchase, Please Enter Your Personal Customer Details</legend>
<div class="form-group">
<label for="customer_title" class="col-sm-4 control-label">Title *</label>
<div class="col-sm-8">
<select name="customer_title" id="customer_title" class="form-control">
<option></option>
<option value="Mr">Mr. </option>
<option value="Mrs">Mrs. </option>
<option value="Miss">Miss. </option>
<option value="Ms">Ms. </option>
<option value="Dr">Dr. </option>
<option value="Rev">Rev. </option>
</select>
</div>
</div>
Working solution:
.hack legend {
margin-bottom: 0 !important;
border-bottom: none !important;
}
.hack legend:after {
display: block;
height: 20px; /* #baseLineHeight; */
border-top: 1px solid #e5e5e5;
content: "";
}
Another possible work-around, didn't work in this case:
form.form-horizontal > fieldset {
& > legend {
margin-bottom: 0;
}
& > div.form-group:first-of-type > * {
margin-top : 20px;
}
}
Reference: https://github.com/twbs/bootstrap/issues/2544
Related
The code below generates the dropdown to choose the colors from the datalist but also give an 'other' option. I want to restrict the choice of colors to the ones I provide as options.
<input type="color" id="some id" name="someName" list="rainbow" value="#FF0000">
<datalist id="rainbow">
<option value="#FF0000">Red</option>
<option value="#FFA500">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#008000">Green</option>
<option value="#0000FF">Blue</option>
<option value="#4B0082">Indigo</option>
<option value="#EE82EE">Violet</option>
</datalist>
I appreciate this isn't really an answer, but it's a bit too detailed for a comment :)
The list of options only renders at all on Chrome, Opera, and Android anyway. In Firefox it's just a colour-wheel, and in Internet Explorer, Safari, Edge, iOS, Windows Phone, and Opera Mini it's a horribly non-user-friendly textbox into which the user has to type the hex codes, with no default options provided.
Assuming you are only providing a small number of colours to choose from, and since you have no need for the colour-wheel functionality even on the 4 browsers that support it, wouldn't you be better off just offering a list of radio buttons? A bit of CSS and a sprinkling of JS and this looks decent all the way back to IE8:
<!DOCTYPE html>
<html>
<head>
<title>Color example</title>
<style>
.color label {
border-right: solid 1.4em #ddd;
width: 6em;
display: inline-block;
margin: 3px 1em 3px 0;
padding: 1px;
background: #ddd;
}
</style>
</head>
<body>
<div id="someId" class="color">
<label><input name="someName" type="radio" value="#FF0000" checked="checked">Red</label>
<label><input name="someName" type="radio" value="#FFA500">Orange</label>
<label><input name="someName" type="radio" value="#FFFF00">Yellow</label>
<label><input name="someName" type="radio" value="#008000">Green</label>
<label><input name="someName" type="radio" value="#0000FF">Blue</label>
<label><input name="someName" type="radio" value="#4B0082">Indigo</label>
<label><input name="someName" type="radio" value="#EE82EE">Violet</label>
<script>
var options = document.getElementById("someId").getElementsByTagName("input");
for (var option = 0; option < options.length; ++option) {
options[option].parentNode.style.borderColor = options[option].value;
}
</script>
</div>
</body>
</html>
I would like to change the font color of an <option> with the attribute disabled.
I have tried this
option:disabled { color: red }
and this
option[disabled] { color: red }
Both work but the color only gets red when you CLICK on the select field. By default it is black. How can I change it?
Here is an example: http://jsfiddle.net/y0g0stbb/
It can't be both selected and disabled.
option:disabled {
color: red;
}
<select>
<option selected>Choose something</option>
<option disabled>1</option>
<option>2</option>
<option>3</option>
</select>
If you want to disable the select, instead of the option you need to moved disabled to the select tag
select:disabled {
color: red;
}
<select disabled>
<option selected>Choose something</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
The color has to be applied to the select element, not the option. So, you can do this:
You can use required and assign empty value to the first option:
<select required>
<option value="" disabled>0</option>
<option value="1">1</option>
</select>
css:
select:invalid { color: red; }
If you do this, when the option with empty value is selected, the select element will be invalid, and so the above css class will trigger.
Solved this thanks to the answer to this post: Changing the color of a <select> depending on its value - CSS only(?)
Try this:
CSS:
select{
color:red;
}
option{
color:black;
}
try this, hope it will work:
in html:
<select>
<option value="">Choose something</option>
<option disabled="disabled" value="" class="red">1</option>
<option disabled="disabled" value="" class="red">2</option>
<option disabled="disabled" value="" class="red">3</option>
</select>
in CSS:
select :disabled.red{
color: red;
}
With a little bit of Javascript you can do something like this if there are no selected valid option:
<select class="">[options]</select>
And if there a selected valid option you simple put some class through javascript in the select element:
<select class="selected">[options]</select>
And then in your CSS:
select{
color: [not selected color];
}
select.selected{
color: [selected color];
}
I have that code:
<form class="choose-game" action="?" method="get">
<fieldset>
<select name="game" id="game" required>
<option value="battlefield 4">Battlefield 4</option>
<option value="call of duty ghosts">Call Of Duty: Ghosts</option>
<option value="fifa 2014">FIFA 2014</option>
<option value="league of legends">League of Legends</option>
<option value="need for speed rivals">Need For Speed: Rivals</option>
</select>
<input type="submit" value="Wybierz">
</fieldset>
</form>
JSFiddle, but I want to input fill the remaining space in fieldset (except interstice). Any other one solution from StackOverflow doesn't work. What I must to do?
If you are okay with setting the width of the select box to a percentage you can then have the input fill the remaining width. You will also have to float the input and select to the left.
Try modifying the .choose-game select and input properties like this
.choose-game select { width:20%; float:left }
.choose-game input[type="submit"] {
background-color: #3498db; color: #fff; cursor: pointer; width:80%; float:left;
}
I'm using a form with a drop-down menu that contains some options disabled, so the users cannot select them. I'm trying to customize via css these elements but I have some problems with Chrome and IE7/8/9/10.
HTML:
<div class="formBody">
<select name="form[categoria][]" id="categoria" class="rsform-select-box">
<option selected="selected" value="">Scegli una categoria</option>
<option disabled="disabled" value="">Impresa </option>
</select>
<span class="formValidation">
<span id="component50" class="formNoError">Scegli una categoria</span>
</span>
</div>
CSS:
select option[disabled] { color: #000; font-weight: bold }
This code works only with Firefox and doesn't work with Chrome and IE (all version).
Any idea to solve this problem?
Below the html code for select-box
<div class="formBody"><select name="form[categoria][]" id="categoria" class="rsform-select-box" ><option selected="selected" value="">Scegli una categoria</option><option disabled="disabled" value="">Impresa </option><option value="Servizi">Servizi</option><option value="Informatica">Informatica</option><option value="Commercio">Commercio</option><option value="Telecomunicazioni">Telecomunicazioni</option><option value="Editoria/Stampa">Editoria/Stampa</option><option value="Meccanica/Elettrica">Meccanica/Elettrica</option><option value="Alimentare">Alimentare</option><option value="Chimica/Farmaceutica">Chimica/Farmaceutica</option><option disabled="disabled" value="">Edilizia </option><option value="Tessile/Moda">Tessile/Moda</option><option value="Mobili/Arredamenti">Mobili/Arredamenti</option><option value="Alberghi/Ristoranti">Alberghi/Ristoranti</option><option value="Trasporto/Logistica">Trasporto/Logistica</option><option value="Finanza">Finanza</option><option value="Altro">Altro</option><option disabled="disabled" value="">Professionista </option><option value="Commercialista">Commercialista</option><option value="Ragioniere">Ragioniere</option><option value="Notaio">Notaio</option><option value="Tributarista">Tributarista</option><option value="Avvocato">Avvocato</option><option value="Consulente del lavoro">Consulente del lavoro</option><option value="Altro">Altro</option><option disabled="disabled" value="">P.A. Locale </option><option value="Regione">Regione</option><option value="Provincia">Provincia</option><option value="Comune">Comune</option><option value="Comunità Montana">Comunità Montana</option><option value="ASL">ASL</option><option value="CCIA">CCIA</option><option value="Altro">Altro</option><option disabled="disabled" value="">P.A. Centrale </option><option value="Associazione di categoria">Associazione di categoria</option><option value="Privato">Privato</option><option value="Altro">Altro</option></select><span class="formValidation"><span id="component50" class="formNoError">Scegli una categoria</span></span></div>
What you're looking for is this:
select option:disabled {
color: #000;
font-weight: bold;
}
Here, have a fiddle.
Attention: according to reports on the comments section, this solution does not work on OS X.
I used :invalid to solve my issue, description below:
So these answers do style the disabled option but only within the dropdown. Not if you wanted to display the disabled option at the top of the list as a "Please select".
Hope this helps others having a similar issue to what I had.
Basically, the select needs to be a required field for this to work:
<select required>
Assuming the option is at the top of the list:
<option disabled selected value="">Please select</option>
And your SCSS looking something like this:
select {
// The select element is set to required
// as long as the selected options value
// is empty the element is not valid.
&:invalid {
color: gray;
}
// Styling for browsers which do support
// styling select option elements directly
[disabled] {
color: gray;
}
option {
color: black;
}
}
So it's the :invalid which allows us to colour the disabled selected option.
Thanks to Markus Oberlehner for his post:
Blog post: https://markus.oberlehner.net/blog/faking-a-placeholder-in-a-html-select-form-field/
Codepen: https://codepen.io/maoberlehner/pen/WOWrqO
There is a way to do this with CSS only. But you need to tweak your HTML to follow some rules:
set your select to be required
disabled options need to have empty value fields: value=""
you need to style the :valid and :invalid states
Here is the markup:
<select required>
<option value="" selected disabled>Disabled default</option>
<option value="" disabled>Just disabled</option>
<option value="" >Empty but valid</option>
<option value="a-value-here">Fully valid</option>
</select>
select {
width: 500px;
padding: 10px;
}
select:invalid {
background: red;
}
select:valid {
background: green;
}
Here is the fiddle: https://jsfiddle.net/james2doyle/hw1m2cd9/
Now, when an option that is disabled and also value="", the :invalid styling will be applied. You can see that empty values are still ok.
If only select supported pattern, then we could validate with regex instead. At the time of this comment, it does not and is only supported on input "text" types.
This solution should work on IE >= 10
I do not think you can target an option tag using pure CSS; you can only modify a select tag.
Effort to modify a select tag.
Same effort to modify an option tag.
However, there are workarounds. See this question.
<select>
<option value="volvo" >Volvo</option>
<option value="saab">Saab</option>
<option value="vw" disabled>VW</option>
<option value="audi" class="colr">Audi</option>
<option value="aaa">Something</option>
<option value="ccc">Other</option>
<option value="vw" disabled>VW</option>
<option value="vvv">Apple</option>
<option value="nnn" class="colr">Mango</option>
<option value="cmmmcc">Plum</option>
</select>
option:disabled {
background: #ccc;
width: 500px;
padding: 5px;
}
option.colr {
background: red;
width: 500px;
padding: 5px;
}
Check the link
http://jsfiddle.net/W5B5p/110/
I used a simple hack to make disabled options grey, hopefully someone finds it useful.
<label>
<div id="disabledMask"></div>
<select id="mySelect">
<option disabled selected>Please Select</option>
<option value="foo">Bar</option>
</select>
</label>
<style>
label {
position: relative;
}
#disabledMask {
position: absolute;
background-color: #fff;
opacity: 0.5;
pointer-events: none;
width: 100%;
height: 100%;
display: none;
}
</style>
<script>
var toggleMask = function(){
var option = this.options[this.selectedIndex];
var disabledMask = document.getElementById('disabledMask');
disabledMask.style.display = option.disabled? 'block' : 'none';
};
var mySelect = document.getElementById('mySelect');
mySelect.addEventListener('change', toggleMask);
toggleMask.bind(mySelect)();
</script>
Here is a jsfiddle: https://jsfiddle.net/jhavbzcx/
Disclaimer: depending on the styling of your select you may need to style the #disabledMask so as not to overlap the dropdown arrow.
<select class="dropdown" name="contactMethod">
<option selected disabled>Contact method:</option>
<option class="dropdownplus"> E-mail: </option>
<option class="dropdownplus"> Website </option>
<option class="dropdownplus"> None</option>
</select>
<style>
.dropdown {
background-color: rgba(195, 0, 97, 0.1);
width: 100%;
border: 1px solid #CC0061;
border-style: inset;
color: grey;
text-decoration: none;
display: inline-block;
font-size: 16px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
option.dropdownplus {
color: black;
}
</style>
See img https://ibb.co/d9453b
var select = document.getElementsByTagName("select");
for(var i = 0;i < select.length; i++)
{
var el = select[i];
var optVal = el.options[el.selectedIndex].value
el.addEventListener('change', function () {
// Using an if statement to check the class
if (optVal == "") {
el.classList.remove('not_chosen');
} else {
el.classList.add('not_chosen');
}
});
}
Consider the following code:
<div data-role="fieldcontain">
<label for="name">Car</label>
<select data-inline="true" data-theme="b">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<span>message</span>
</div>
The output as follows:
There is a big gap between the component and the message. How can I reduce this gap to a desired amount?
(I tried applying CSS such as width:100px to the component, but no success)
EDIT :
Here is the live demo: http://jsbin.com/icikif/1
The reason can be found in the CSS of jQm:
#media (min-width: 450px)
.ui-field-contain .ui-select {
width: 78%;
display: inline-block;
}
Add a custom Stylesheet and overwrite the width setting.
I'm not sure what you're asking for, but if you want the "message" to be closer to the styled select, add this rule in your CSS:
.ui-field-contain .ui-select {
width: auto !important;
}
just change auto to the desired amount.