I have a form with code similar to:
<form class="eng-select" action="action.php" method="POST">
<select name="position">
<option value="disabled" disabled selected>Engineer</option>
<option value="entry-1">John Doe</option>
<option value="entry-2">David Smith</option>
<option value="entry-3">Michael Silk</option>
</select>
</form>
Which produces a dropdown like this:
However I would like to change the css color of the disabled selected entry (what the user sees when they load the page - the picture above). Is this possible, and if so what would the proper CSS call be?
I have looked at similar posts for IE here that mention:
select option [disabled] { background-color: blue; }
but this does not work for me (I am using Google Chrome).
To clarify - I would like to change the CSS before the user clicks and opens the dropdown box.
Your CSS must be
select option[disabled] { background-color: blue; }
Without the space after option. It should work better this way.
With the space, it applies to descendants of the option.
use below css for disabled select option
select option:disabled {
background-color: blue;
}
<form class="eng-select" action="action.php" method="POST">
<select name="position">
<option value="disabled" disabled selected>Engineer</option>
<option value="entry-1">John Doe</option>
<option value="entry-2">David Smith</option>
<option value="entry-3">Michael Silk</option>
</select>
</form>
Related
I am using a asp.net screen to enter the data as we as I also want to use same screen as red-only mode to view only for some users.
I have drop down in my screen that default selected index is 0 and text is 'Please Select' these drop downs are not mandatory so in edit mode user may not select any value for drop downs so default value would be 'Please Select' but when user open a same screen in read-only mode to view the saved data I want to hide those drop-down which are having default value as 'Please Select' but by using CSS. I have an option using jquery but I am looking a way by using css if it is possible. I have two css file that I am changing dynamically for read-only mode and edit mode.
I got some css as follows, in same way I am looking solution for my issue.
<!DOCTYPE html>
<html>
<head>
<style>
select [value=two][selected=selected] {
display:none
visibility:hidden;
}
</style>
</head>
<body>
<th>Show This Drop down</th>
<select id="ddlNumber">
<option value="-1">Please Select</option>
<option value="one">one</option>
<option value="two" selected="selected">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<br>
<br>
<th>Hide This Drop down by css</th>
<select id="ddlAlpha">
<option value="-1" selected="selected">Please Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</body>
</html>
I have this input field:
<select name="billing_address_id" id="billing-address-select" class="address-
select" title="" onchange="billing.newAddress(!this.value)">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
I always want to hide / get rid off the last option. This is what I figured out working in Chrome but unfortunately not in Safari:
select#billing-address-select option:last-of-type {display: none;}
Any chance to get this working across all browsers?
Thanks
You can't display: none on elements in Safari. Safari (and IE) is restricting CSS on form elements.
EDIT
But you could use some javascript to rebuilt your select :
var $select = $('#billing-address-select option').detach();
$('#billing-address-select').empty().append( $select.filter('.add') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="billing_address_id" id="billing-address-select" class="address-
select" title="">
<option class="add" value="1">Option1</option>
<option class="add" value="2">Option2</option>
<option value="3" disabled>Option3</option>
</select>
I am using a multiselect box in JSP(Spring MVC).I have Three options in the multiselect. No CSS used for the size. but I am getting the multiselect size oversized. I just need the exact size with no extra spaces in it.
Please refer below for the code:
<select id="test" name="test" multiple="multiple">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
The output contains some space under test3 which is not required. is there a way to eliminate that extra space?
NOTE: No CSS is used with the id.
Why not just set the height of the select via CSS?
select {
height: 45px;
}
<select id="test" name="test" multiple="multiple">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
I have been searching the web for a result all day to solve my question...
I want a list of options, that would each link to a different image. However, instead of the image opening in a new window, I want the image to open in a lightbox on the same page (lightbox evolution for wordpress is the plugin I am using).
I have tried using onclick in input field, and the lightbox will open (if class="lightbox") but no image loads.
I don't know if I need to add a function that will allow the input to recognize which option is selected so that when the input button is clicked, that that specific image opens in a lightbox.
And if I do need a function, I don't know where to add the function... onclick? Somewhere in the option tag, or select tag?
<form>
<select>
<option value="linkimage1.jpg">image 1</option>
<option value="linkimage2.jpg">image 2</option>
<option value="linkimage3.jpg">image 3</option>
<input type="button" value="submit" />
</select>
</form>
Any help would be appreciated, even if it's to a good link that could explain how I could create a function and add it to my code, and then use a solution to call the function into my dropdown.
Thanks
If using iLightBox http://ilightbox.net/ you can do that like this:
<select id="selectImage">
<option>Select Image</option>
<option value="linkimage1.jpg">image 1</option>
<option value="linkimage2.jpg">image 2</option>
<option value="linkimage3.jpg">image 3</option>
</select>
<script>
jQuery(document).ready(function($){
$('select#selectImage').change(function(){
var $this = $(this),
url = $this.val();
$.iLightBox(url);
});
});
</script>
I have a dropdownlist declared like this:
<select id="PageToCreate_AuthorID">
<option value="">Please select...</option>
<option value="1">Thierry</option>
<option value="2">Vanessa</option>
</select>
When the page is showed the fist time, here is what is displayed:
As you can see, we don't see all the text inside the control.
Then I click inside it and the dropdown is adjusted:
How can I do to have the dropdown showed correctly when the page is showed the first time?
Thanks.
Try to add some css for your select tag :
<select id="PageToCreate_AuthorID">
<option value="">Please select...</option>
<option value="1">Thierry</option>
<option value="2">Vanessa</option>
</select>
Css:
#PageToCreate_AuthorID {
min-width:200px; /* Change this value if you think you must do it */
}