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;
}
Related
I'll try with -webkit-appearance:none, outline:none but this issue isn't fix, Please give CSS solution for remove default value in chrome.
select:invalid { color: gray; }
<form>
<select required>
<option value="" disabled selected hidden>Please Choose...</option>
<option value="uno">one</option>
<option value="dos">two</option>
</select>
</form>
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'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
I have tried a lot but can not do this. I want to show the red background colour to the selectbox after option is selected.
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<style type="text/css">
select:hover {
background:#Ff0000;
color : #ffffff;
}
</style>
Try this:
var select = document.getElementById('mySelect');
select.onchange = function () {
select.className = 'redText';
}
.redText {
background-color:#F00;
}
<select id="mySelect">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
You need to use javascript/jquery to handle change selection event for selectbox and add red background
HTML
<select>
<option>Select</option>
<option selected>im selected</option>
<option>im not</option>
<option>me too</option>
<option>me either</option>
</select>
CSS
select { color: black; background: red; }
option:not(:checked) { background: white; }
http://jsfiddle.net/kQ6c5/
EDIT
http://www.w3.org/TR/selectors/#checked:
the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes
Absolutely yes, you can do this using :checked selector,
Check this demo jsFiddle
Syntax
option:checked { }
HTML
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
CSS
option:checked {
background:#Ff0000;
color : #ffffff;
}
I have a form with a drop down list of venues and a submit button.
They are supposed to be on the same line, but since the list of venues is dynamic, it could become too long and push the button down.
I was thinking of setting a max-width property to the select, but I'm not clear whether this will work in all browsers. Do you have any suggestions on a workaround?
<form action="http://localhost/ci-llmg/index.php/welcome/searchVenueForm" method="post" class="searchform">
<select name="venue">
<option value="0" selected="selected">Select venue...</option>
<option value="1">venue 0</option>
<option value="2">club 1</option>
<option value="3">disco 2</option>
<option value="4">future test venue</option>
</select>
<input type="submit" name="" value="Show venue!" class="submitButton" />
</form>
css:
.searchform select {
max-width: 320px;
}
.searchform input.submitButton {
float: right;
}
If the venues are generated on the server side, you can use your server-side scripting to cut them down to a specific maximum character count.
When using pure CSS I'd also try setting overflow:hidden, both on the select and the option elements. Also try setting max-width on the option element. When it works in all non-IE, you can use the usual scripts to add max-width support for IE.
try:
fieldset select {
width: auto;
}