Hi I was wondering how to give a datalist and the corresponding input the same width. I tried the following :
input {
width: 100%;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
datalist,option{
width: 100%;
}
<input list="myList"/>
<datalist id="myList">
<option> This is a great option</option>
</datalist>
The datalist is not the input width when I use the code above. Does anyone know how to make a datalist with the same length as the input he belongs to. Thanks in advance.
You could try something like this. Assign a class to each and style with CSS.
CSS
.input {
width: 100%;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
.Option {
width: 100%;
}
HTML
<input list="myList"/>
<datalist id="myList">
<option class="Option"> This is a great option</option>
</datalist>
It might give you the desired outcome.
Related
I'm trying to change the background color on hover in select, I tried many ways and It wont change.Really appreciate If you can help,
.selector {
background-color: #252525;
color: #fff;
border: none;
border: 1px solid #595E57;
padding: 5px;
width: 150px;
}
.selector option:hover{
background-color: #1BA1E2 !important;
}
<select name="" class="selector">
<option value="">Select</option>
<option value="">Select</option>
</select>
.selector {
background-color: #252525;
color: #fff;
border: none;
border: 1px solid #595E57;
padding: 5px;
width: 150px;
overflow:hidden;
}
.selector option{
padding:5px;
}
.selector option:hover{
background-color: #1BA1E2 !important;
}
<select onfocus='this.size=10;' onchange='this.size=1; this.blur();' name="" class="selector">
<option value="">Select1</option>
<option value="">Select2</option>
<option value="">Select3</option>
<option value="">Select4</option>
</select>
Form elements are rendered by the OS and not the browser, so the CSS isn't always (or even 'is rarely') applied. There are ways to change the highlight color in Firefox, by adding a box-shadow to the CSS for option:hover, but this is browser-specific.
Try something like box-shadow: 0 0 10px 10px #1BA1E2 inset;
At the end it's not worth it. Think on mobile first. On iOS the options will be rendered in a very own way anyway. There are no colors.
I'm trying to fix an issue with a hoverable span in html. Inside the span element is a html-select option. When I try to select something, the hoverable span disappears.
This issue only occurs in Firefox. In Chrome I don't have this issue.
HTML Part:
<span class="over">
<i class="fa fa-cogs edit"></i>
<div>
<form method="post" accept-charset="utf-8" action="/edit">
<div class="input select">
<label for="select-id">Select</label>
<select name="select_id" id="select-id">
<option value="">-- select --</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
</form>
</div>
</span>
SCSS Part:
.over{
margin-right: 0.5em;
&>i{
color: #bbbbbb;
padding: 2px;
}
&>a{
padding: 2px;
display: none;
&:hover{
color: #000;
}
}
&>div{
display: none;
position: absolute;
border: 1px solid #ccc;
margin: 6px 0 0 -20px;
padding: 2px;
background: white;
border-radius: 4px;
min-width: 140px;
z-index: 100;
text-align: left;
input, select{
padding: 0 5px;
line-height: 1.5em;
width: auto;
display: inline-block;
}
label{
margin: -4px 4px;
display: inline-block;
}
}
&:hover{
border: 1px solid;
border-radius: 4px;
&>i{
color: #000;
}
&>a{
display: inherit;
}
&>div{
display: inline-block;
}
}
}
}
In Chrome I can hover over the span item and select a option from the select-element. Even if I leave the hoverable area.
In Firefox I can also hover over the div, but as soon as I leave the hoverable area, the box disappears and I cannot select an Item.
Problem seems to be fixed in Firefox now.
I have a select element that lays directly up against an input. It looks great for the most part, but there's too much whitespace on some of the options. It seems like unless I set some static width myself, select expands to the width of its largest option.
I want to make it so that the select option only takes up as much width as the currently displayed option. I'd ask if it's possible, but I know it is somehow because I've seen it on Amazon's homepage on their search bar. The behavior of the select that controls their search filter is essentially what I'm trying to recreate on my website, but I can't figure out exactly what they did. Here's the code that reproduces the basic idea of what I've got currently.
HTML:
<select>
<option>All</option>
<option>Consoles</option>
<option>Games</option>
<option>Equipment</option>
</select>
<input type="text" />
CSS:
select {
-moz-appearance: none;
-webkit-appearance: none;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
border-right: 0;
box-sizing: border-box;
height: 44px;
padding: 10px;
text-align: center;
float: left;
}
input[type='text'] {
height: 44px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
margin: 0;
padding: 0 5px;
font-size: 14px;
min-width: 300px;
}
I have a fiddle with everything here as well.
I know I could use JavaScript to make it work, but that would be an absolute last resort in my mind. I want to do it in pure HTML and CSS if I can. Any help is greatly appreciated.
Hope this is the thing that you want exactly. But since the <select> width need to be calculated or determined with another value, it is required some JavaScripts. I used pure jQuery and did some changes to your HTML and CSS.
The answer to your problem is, you need to append your selected option to another select option to get the current option width and keep it until the next change of the select.
HTML:
<div id="main-div">
<select id="resized">
<option value="All">All</option>
<option value="Consoles">Consoles</option>
<option value="Games">Games</option>
<option value="Equipment">Equipment</option>
</select>
<input type="text" />
</div>
<!-- hidden select to calculate the selected option width -->
<select id="hidden_select">
<option id="hidden_select_option"></option>
</select>
CSS:
select {
-moz-appearance: none;
-webkit-appearance: none;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
border-right: 0;
box-sizing: border-box;
height: 44px;
padding: 10px;
text-align: center;
float: left;
}
input {
height: 44px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
margin: 0;
padding: 0 5px;
font-size: 14px;
}
#main-div{
display: none;
width: 375px;
}
#hidden_select {
display: none;
}
jQuery:
$(document).ready(function() {
$('#resized').change();
$("#main-div").css("display", "block");
});
$('#resized').on("change", function(){
$("#hidden_select_option").html($("#resized option:selected").text());
$(this).width($("#hidden_select").width());
//fix the input filed width
var x = $("#main-div").width();
var y = $(this).width() + 21;
$("input").width((x-y) - 12);
});
Note: values 21 and 12 are your padding values and border values of select and input.
Working Code:
https://jsfiddle.net/y82x60fa/10/
Here is the solution with simple jquery. On Amazon's home page is also done with js or other scripting language.
$('#resizingSelectTag').change(function(){
$("#widthTempOption").html($('#resizingSelectTag option:selected').text());
$(this).width($("#selectTagWidth").width());
});
#resizingSelectTag {
width: 50px;
}
#selectTagWidth{
display : none;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
border-right: 0;
box-sizing: border-box;
height: 44px;
padding: 10px;
text-align: center;
float: left;
position:absolute;
border-right: 1px solid #ccc;
}
input[type='text'] {
height: 44px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
margin: 0;
padding: 0 5px;
font-size: 14px;
min-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="resizingSelectTag">
<option>All</option>
<option>Lorem Ipsum</option>
<option>Lorem Ipsum is</option>
</select>
<select id="selectTagWidth">
<option id="widthTempOption"></option>
</select>
<input type="text" />
I have a simple select dropdown menu with a significant amount of padding-left and padding-right:
If you click the select input, you'll notice the option tags also have the same amount of padding-left and padding-right applied. However, I want the padding to only apply to the select tag, but not the option tags (i.e. no padding for the option tags).
How can I do this?
select {
width: 400px;
background: lightgray;
padding: 12px 48px;
}
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
From what I know the select box and the dropdown get rendered by the browser engine. This means they are not changeable.
So the only solution is to use a framework (Because of this reason there are many outside) or build one by your own.
If you look in the developer console you will also see that most of the styles of the option element are inherited by the browser and greyed out.
Try This:
$(document).ready(function(){
$('.sel').click(function(){
$('ul').toggle();
})
$('li').click(function(){
$('.sel input[type=text]').val($(this).html());
$('ul').hide();
})
})
* {
box-sizing: border-box;
}
.wrapper {
width: 400px;
position: relative;
cursor: pointer;
}
.sel {
position: relative;
width: inherit;
border: 1px solid #000;
}
.sel input[type="text"]{
width: 100%;
background: lightgray;
padding: 12px 48px;
border-style: none;
outline: none;
cursor: pointer;
}
.sel span {
position: absolute;
right: 25px;
top: 10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
background: lightgray;
width: 100%;
display: none;
z-index: 999;
}
li {
padding: 10px 0;
}
li:hover {
background-color: skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper">
<div class="sel">
<input type="text" readonly="readonly" value="Option1"><span>▼</span>
</div>
<ul>
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
</ul>
</div>
Using HTML and CSS, how can I make a dropdown menu which, without being hovered over or clicked, shows two items, namely the unselectable default (title) and the first selectable item?
At the moment all I have got this, which shows the title item only:
HTML
<select class="select-box" id="form" onChange="window.location.href=this.value">
<option value="">Select</option>
<option value="http://foobar.com/1.html">1</option>
<option value="http://foobar.com/2.html">2</option>
<option value="http://foobar.com/3.html">3</option>
<option value="http://foobar.com/4.html">4</option>
</select>
CSS
.select-box {border:1px solid #000; height:18px; text-align: center; }
form input[type="text"] {
height: 14px; width: 200px;
margin-top: 3px; color: #000; border: 1px solid #000; }
You can use the size attribute in your select element. Also, remove the height property for this to work.
.select-box {
border: 1px solid #000;
text-align: center;
}
form input[type="text"] {
height: 14px;
width: 200px;
margin-top: 3px;
color: #000;
border: 1px solid #000;
}
<select class="select-box" id="form" onChange="window.location.href=this.value" size="2">
<option value="">Select</option>
<option value="http://foobar.com/1.html">1</option>
<option value="http://foobar.com/2.html">2</option>
<option value="http://foobar.com/3.html">3</option>
<option value="http://foobar.com/4.html">4</option>
</select> CSS