I am using wicket framework and overriding appendOptionHtml of ListMultipleChoice
to generate below select tag and using CSS :before to place red * before option text
it is working fine in FF but not in IE.
CSS:
.required:before {
content: "*";
color: #8B2942;
}
HTML:
<select>
<option class="required" value="0">test1</option>
<option class="required" value="1">test2</option>
<option class="required" value="2">test3</option>
</select>
Can anyone please help or any other way to put red asterisk to my option text?
I have tried all DOCTYPE still not working.
The required notice belongs on the label of the select field, not the options. eg:
.required{color:#8B2942}
<label for="myselect"><span class="required">*</span> Title: </label>
<select id="myselect" name="myselect">
<option value="1">test1/option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
Related
I want to display the selected option in the same colour as the option itself.
<select>
<option value="1" style="color:blue">Blue</option>
<option value="2" style="color:red">Red</option>
</select>
The options are displayed correctly in blue and red colours, but once selected, they are black. Is it possible to display it in blue or red, matching the selected option?
PD: I know how to do it in JS, but I'm not sure if it could be done in CSS
This can be done with pure CSS with the :has pseudo class
select:has(option[value="1"]:checked) {
color: blue;
}
select:has(option[value="2"]:checked) {
color: red;
}
<select>
<option value="1">Blue</option>
<option value="2">Red</option>
</select>
If select has onchange it can modify dataset equal to value. Then css can reflect that. If this is part of a larger application, remove onchange and implement an event listener in js file
.blue,select[data-chosen='1']{
color:blue;
}
.red,select[data-chosen='2']{
color:red;
}
<select onchange="this.dataset.chosen = this.value;" data-chosen="1">
<option value="1" class="blue">Blue</option>
<option value="2" class="red">Red</option>
</select>
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 have problem with :nth-child in IE.
Please run this script in IE and Firefox (I make a test in IE 11 and Firefox 44.0.2.): LINK
<div class="dropdown">
<select class="dropdown-select" onchange="if (this.value) window.location.href=this.value">
<option value="#">Wybierz swoją szkółkę</option>
<option value="http://xxx">1</option>
<option value="http://xxx">2</option>
<option value="http://xxx">3</option>
<option value="http://xxx">4</option>
<option value="http://xxx">5</option>
<option value="http://xxx">6</option>
</select>
</div>
select option:nth-child(5){
display:none;
color:red;
}
I want to hide 5th option.
Thx for help! My solution:
var elem = document.getElementById("divid");
elem.parentNode.removeChild(elem);
I have the following code example:
<label>
Enter your favorite cartoon character:<br />
<input type="text" name="favCharacter" list="characters" maxlength="50" style="width:95%;">
<datalist id="characters">
<option value="Homer Simpson">
<option value="Bart">
<option value="Fred Flinstone">
</datalist>
</label>
Is it possible to style "Bart" option, for example paint it with yellow -
style="color: yellow" ?
Browsers define their own styles for these elements (datalist, select, option) and you can't style them.
You can use CSS with using the attribute access:
option[value="Bart"] {
color: yellow;
}
this would change the color to yellow for <option value="Bart"> Tags
I am trying to create a simple label and select box for a form.
I want this: [LABEL] [SELECT BOX]. Inline. All on the same line. Simple, eh?
Yet when I use the inline form element from bootstrap, it wraps the box:
<form class="form-inline" role="form">
<label for="sort-values">Sort:
<select id="sort-values" class="form-control">
<option value="2">Distance</option>
<option value="3">Rating</option>
<option value="4">Price</option>
</select>
</label>
</form>
What am I missing? Example here: http://bootply.com/79458
The width of the element .form-control is the problem..
.form-control {
width: 100%;
}
It is currently at 100%.. if you want it to work, you can either remove the width completely.. or just specify a smaller width, such as 200px;
Forked example here
You can use two methods for linking label and select. First method: id for select and attribute for for label. Second: including select inside of label. Not necessary use both of them.
Code:
<form class="form-inline" role="form">
<label class="control-label" for="sort-values">Sort:</label>
<select id="sort-values" class="form-control">
<option value="2">Distance</option>
<option value="3">Rating</option>
<option value="4">Price</option>
</select>
</form>
Example: http://bootply.com/79462