I am trying to have datalist list element always visible. As standard after focused lost, the arrow disappears.
I would like to have it always like this:
Here is the plunker: https://plnkr.co/edit/?p=preview
<input list="browsers" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
ENVIRONMENT: Angular directive
Any ideas how to achieve it?
Best,
I have got the arrow always visible using css:
input::-webkit-calendar-picker-indicator {
opacity: 100;
}
<input list="browsers" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
Related
i am trying to chaneg the colour of text using twitter-bootstrap but something is wrong it is not working.
here is my code:
<select name="number" '<?=htmlspecialchars($s['number'])?>'td>"
<option><?=htmlspecialchars($s['number'])?></option>
<option class="text-cuccess">Tak</option>
<option class="text-danger">Nie</option>
</select>
.newcolor {
color:red;
}
.newcolor1{
color:green;
}
<select id="select" onchange="this.className=this.options[this.selectedIndex].className">
<option style="color:gray" value="null">select one option</option>
<option value="1" class="newcolor">one</option>
<option value="2" class="newcolor">two</option>
<option value="2" class="newcolor1">two</option>
</select>
I am using the Themify builder and I created a small form in a text block in the builder.
There is unintentional gap above the fields. You can view it live here.
HTML:
<form action="contact_info.php" method="get">
Loan Calculator
<select class="form-inline">
<option value="1000">$1,000 Loan</option>
<option value="2000">$2,000 Loan</option>
<option value="5000">$5,000 Loan</option>
<option value="7500">$7,500 Loan</option>
<option value="10000">$10,000 Loan</option>
<option value="12000">$12,000 Loan</option>
<option value="15000">$15,000 Loan</option>
<option value="17000">$17,000 Loan</option>
<option value="20000">$20,000 Loan</option>
<option value="25000" selected="selected">$25,000 Loan</option>
<option value="30000">$30,000 Loan</option>
<option value="40000">$40,000 Loan</option>
<option value="50000">$50,000 Loan</option>
<option value="60000">$60,000 Loan</option>
<option value="70000">$70,000 Loan</option>
<option value="80000">$80,000 Loan</option>
<option value="90000">$90,000 Loan</option>
<option value="100000">$100,000 Loan</option>
</select>
<select class="form-inline">
<option value="1">1 Year</option>
<option value="2">2 Years</option>
<option value="3">3 Years</option>
<option value="4">4 Years</option>
<option value="5" selected="selected">5 Years</option>
<option value="6">6 Years</option>
<option value="7">7 Years</option>
</select>
<input type="submit" value="Calculate" class="form-inline">
</form>
CSS:
.form-inline {
display: inline-block;
margin: 0px;
float: left;
}
Hi please remove <br> tag between <select> in your code and your form fields will be shown as you want. <br> tag forces to break the line, that is why see such gaps.
On your demo page, there are <br> tag after every element in the form, please remove that.
I figured out the problem.
Wordpress adds <br> tags automatically if there is whitespace between form tags.
I removed all the whitespaces between every single tag and the problem was solved.
I am trying to style a SELECT / OPTION boxes using INLINE CSS.
The background-color does not seem to be working:
<option style='bakground-color:red'>text</option>
Basically, I want 3-4 options, but each line to have a separate colored background.
All the CSS examples I have found use external CSS files, or a separate STYLE section above the area I'm working on.
Is it possible to do this inline?
Yes, if you want to give inline style then you can give.
The style is not working in your code because you have a spelling mistake.
You write bakground-color instead of background:color
<select>
<option value="1" style="background-color:yellow">Option 1</option>
<option value="2" style="background-color:orange">Option 2</option>
<option value="3" style="background-color:red">Option 3</option>
<option value="4" style="background-color:green">Option 4</option>
</select>
<option value="aa" style="background: black;">aa</option>
<option value="bb" style="background: blue;">bb</option>
This will show when you select an option from dropdown.
Yes, you can do it inline.
<select>
<option value="green" style="background: green;">green</option>
<option value="cyan" style="background: cyan;">cyan</option>
<option value="yellow" style="background: yellow;">yellow</option>
</select>
I have a <select> and want the first option to be invisible since there is not enough space for the text on the mobile version and it gets chopped off anyway so I resolved to just make it disappear but it wont work. Only with the rest of the options (on PC browsers) but not for the first one. Why is that?
This is what I've already tried
CSS:
option:first-child {
color: transparent;
}
HTML:
<select>
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Thank you.
option:first-child{
display: none;
}
<select>
<option disabled value>Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
using javascript (best way)
(function(){
document.getElementById("first").text = "";
})()
<select id="mySelect">
<option value id="first">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
if you want to hide first option only in mobile, then follow this
(function(){
var window_width = $(window).width();
if(window_width < 480){
document.getElementById("first").text = "";
}
})()
<select id="mySelect">
<option value id="first">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>This will hide only in mobile screen</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
You can set it to display: none; only issue is, it won't work in Internet Explorer (surprise!)
Or just leave the <option> empty...
I think you don't really need to add any css for this reason. If you need to the first option to be blank, then remove Please Select .i.e.,
<select>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
If you want some spacing will be there inside the box even though text is removed you can just add a few times to make look the panel wide enough as show below.
<select>
<option value=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Here is a working pluncker for you. Change it to display:none and add select to the CSS
OR
You can use visibility: hidden; instead of display:none in CSS
select option:first-child {
display:none;
}
<select>
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
jQuery.fn.toggleOption = function(show) {
jQuery(this).toggle(show);
if (show) {
if (jQuery(this).parent('span.toggleOption').length)
jQuery(this).unwrap();
} else {
if (jQuery(this).parent('span.toggleOption').length == 0)
jQuery(this).wrap('<span class="toggleOption" style="display:none;" />');
}
};
You can use media query to handle small devices and phones:
/* you can set any width you want */
#media (max-width: 400px) {
select option:first-child {
display: none;
}
}
<select>
<option style="display:none;">Please select</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
Thanks... :)
I have a problem with IE11 and menu.
When opened the combo, the cursor changes depending on the input behind.
<div>
<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<input type="text" value="mouse changes" readonly="readonly" />
</div>
When trying in IE11, the cursor changes in option 2, to the readonly, it select the option if clicking but it seems forbidden option.