This question already has answers here:
Changing the background colour of an active input selector
(2 answers)
Closed 4 years ago.
I am creating a contact form and want to make it more barrier friendly by highlighting the background of a selected item while tabbing through them with keyboard.
Here is a fiddle to help explain.
When clicking in the first box and then hitting tab, the dropdown menu is selected and should change its background-color to indicate its selection.
(Note: not affecting the dropdown options)
How do I change the correct part of the element when its selected via tabulator?
<html>
<body>
<div class="textarea1">
<textarea rows="1" cols="20">
</textarea>
</div>
<div class="dropdown">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="textarea2">
<textarea rows="1" cols="20">
</textarea>
</div>
</body>
</html>
I have edited the jsfiddle link
https://jsfiddle.net/srg8o0v4/
You just need to add :focus selector for all your form elements as above in textarea and select.
textarea:focus, select:focus { background-color: yellow; }
Related
I tried With fieldset but its disabling only input field and remaining dropdown are not disabled . Is there any solution for my question ??
Problem
What I think you're trying to do is to place a condition on a div, and when that condition is true, you want to disable the div and all child elements.
You can mark a div as disabled using ng-disabled like this:
<div ng-disabled="expression">
<input type="text"> <!-- Won't be disabled! -->
<select> <!-- Also won't be disabled! -->
<option value="1">option 1</option>
</select>
</div>
However, that does not propagate to child elements.
See the doco for ng-disabled here: https://docs.angularjs.org/api/ng/directive/ngDisabled
Solution
You will have to add the ng-disabled attribute to each child element in the div you want disabled.
<div>
<input type="text" ng-disabled="expression">
<select ng-disabled="expression">
<option value="1">option 1</option>
</select>
</div>
Extra
Keeping the ng-disabled attribute on the div is not required to disable the child elements, however it can be used as a useful css selector.
For example, maybe you want to set the opacity for the whole div when it is disabled.
<div class="special-div" ng-disabled="expression">
<input type="text" ng-disabled="expression">
<select ng-disabled="expression">
<option value="1">option 1</option>
</select>
</div>
Using this css
div.special-div[disabled] {
opacity: 0.5;
}
Try this:
document.getElementById("yourDivID").style.pointerEvents = "none";
For Example :
<div id="myDiv">
<h1>This is my division</h1>
</div>
Then code will be as below :
document.getElementById("myDiv").style.pointerEvents = "none";
I have been trying to implement a dropdown list in HTML. The dropdown is shown but the options inside the dropdown are not shown once selected.After selection, the box remains empty.
Following is the code -
<form action="evaluate">
<select name="places">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<br><br>
<input type="submit" class="w3-button w3-red w3-margin-top" value="Submit">
</form>
evaluate is a servlet. I have to select an option from the dropdown. Then after clicking the submit button the data should go to the servlet named evaluate.
You have an extra double quote! <select name="places" "> should <select name="places"> and it works. See the following working link https://jsfiddle.net/xrvmjLpm/
The problem I was facing was with the css files I was using. So, I had to change the class and do a little bit of styling as follows.
<div id ="drop" class="w3-content"">
<style>
#drop
{
background-color:black;
padding:0.9em;
}
</style><!-- code for dropdown menu--> </div>
This question already has answers here:
Is it possible to center text in select box?
(23 answers)
Closed 7 years ago.
I have a select element in my HTML form and by default, the text is aligned left. text-align: center; does not center it like a text input.
From other answers on Stack Overflow, some users say to use the text-indent property but though it moves the text, it isn't good for aligning different lengths of text.
Though a CSS would be best, a javascript/jQuery solution would be okay.
So finally, how do I go about centering the text in a form select element?
HTML Code:
<select name="country">
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
HTML:
<select name="country">
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
CSS:
select {
height: 37px;
padding: 0 20px 0 20px;
}
jsfiddle
if you do not want to pad the eliment you could always use a Javascript-based extension which typically uses <div> elements instead of an actual <select> element and allows you to easily style it.
https://formstone.it/components/dropdown/#options
This question already has answers here:
How to style the <option> with only CSS?
(3 answers)
Closed 7 years ago.
I am trying to style only part (word/letters) of a choice list option similar to this:
This is text containing <span style="color:red;">Colored</span> Text.
The example above works just fine. However if I try to do anything simmilar into <select> element, it doesn't render the span tag at all.
<select>
<option value="volvo">Volvo</option>
<option value="alfaromeo"><span style="color:red">Alfa</span> Romeo</option>
</select>
Also you can specify style within the option tag, but this affects the whole choice, rather than a just part of it.
To sum it up, is there any good way to do this apart from making your own HTML element that looks like a select?
DEMO
You can't style your option tags. You can use libraries like Select 2 that hide your original select and create a new one, which can be stilized.
This code works for me. Not sure how backwards compatible this code is with older browsers, but this was tested with Chrome.
<style type="text/css">
select.picker {
font-size: 2.4em;
}
select.picker option {
color: green;
}
select.picker option:first-child {
color: blue;
}
</style>
and here is the markup
<select class="picker">
<option value="a">Option A</option>
<option value="b">Option B</option>
<option value="c">Option C</option>
</select>
Evidence...
Happy Coding!
Styling selects is a bore. Try this option that mimics a select box with some CSS and jQuery:
https://github.com/octopuscreative/FancySelect
This question already has answers here:
What is the best way to make jump menu (HTML select dropdown)?
(2 answers)
Closed 7 years ago.
I have problem to insert a jump link into this option value:
<select name="countries" id="countries" style="width:300px;">
<option value='ad' data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag ad" data-title="Andorra">Andorra</option>
Do you want to open a link when clicking on the option? Then this should do the job:
<html>
<body>
<select name="countries" id="countries" style="width:300px;">
<option value='ad' data-image="images/msdropdown/icons/blank.gif" onclick="location='http://www.example.com';" data-imagecss="flag ad" data-title="Andorra">Andorra</option>
</select>
</body>
</html>
Here is another solution to opening a link when clicking the option:
I placed the dropdown bar inside of a form tag. JSFiddle: http://jsfiddle.net/cgmef9y4/
Code:
<form>
<select name="URL" id="countries" style="width:300px;" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option value="#">Choose your country</option>
<option value="andorra.html">Andorra</option>
</select>
</form>
When you click the dropdown and choose "Andorra", the page will open the link andorra.html (which obviously leads to a 404 -- as there is no andorra.html page on jsfiddle.net).