I have to remove background of selectbox, I have used code like this
<select style="background:none;border:none">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
But In the output arrow appeared.How can I hide that arrow.
Add -webkit-appearance:none
<select style="background:none;border:none; -webkit-appearance:none">
or add div around and give max width.
<div style="width:80px; overflow:hidden">
<select style="background:none;border:none; width:97px">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
Updated DEMO
Make select width more than 100% and apply overflow:hidden
select {
overflow:hidden;
width: 120%;
}
See this link and the 2nd answer seems more what you are after!
How to remove the arrow from a select element in Firefox
Related
I have a col-xs-8 column as follow:
<div class="col-xs-8">
<div>Every</div>
<select id="update-frequency"
ng-model="retentionSettings.triggers.date.repeat"
ng-disabled="!retentionSettings.triggers.dateStatus">
<option value="day">day</option>
<option value="week">week</option>
<option value="month">month</option>
</select>
<div ng-show="retentionSettings.triggers.date.repeat=='week'">
<div>on</div>
<select id="weekDayDropDown"
ng-model="retentionSettings.triggers.date.weekday"
ng-disabled="!retentionSettings.triggers.dateStatus">
<option ng-repeat="x in weekdaysList()">{{x}}</option>
</select>
</div>
</div>
The contents of this column with the above snippet pile up vertically like so:
I'd like to have them horizontally. Im avoiding using more columns inside this one because the spacing wont work for a sentence where the words should be near eachother. How do I achieve this?
The problem you're having is the divs for "Every" and "on" by default have a display: block. You could add custom styling to change the display value to fix this or you could not use div as demonstrated here:
<div class="col-xs-8">
<span>Every</span>
<select id="update-frequency"
ng-model="retentionSettings.triggers.date.repeat"
ng-disabled="!retentionSettings.triggers.dateStatus">
<option value="day">day</option>
<option value="week">week</option>
<option value="month">month</option>
</select>
<span>on</span>
<select id="weekDayDropDown"
ng-model="retentionSettings.triggers.date.weekday"
ng-disabled="!retentionSettings.triggers.dateStatus">
<option ng-repeat="x in weekdaysList()">{{x}}</option>
</select>
</div>
Let's assume I have a HTML like this:
<div id='main'>
<select name='foo'>
<option>A</option>
<option>B</option>
</select>
<br>
<select name='baa'>
<option>C</option>
<option>D</option>
</select>
<br>
</div>
I'm looking for a CSS rule to make a space between top of these elements, like I had a margin-top: 10px; on every element in main div. How can I make this? Searching I found this solution:
border-collapse: separate;
border-spacing: 0 1em;
But it didn't work in the way I described.
It looks like using a css universal selector will do the trick:
#main *{ /* see the asterisk in the selector here, that's what you're after*/
margin-top: 10px;
}
<div id='main'>
<select name='foo'>
<option>A</option>
<option>B</option>
</select>
<br>
<select name='baa'>
<option>C</option>
<option>D</option>
</select>
<br>
</div>
Give your select a class, then add a margin to the class.
Like this:
.center {
text-align: center;
color: red;
margin-top: 10px
}
<div id='main'>
<select name='foo' class="center">
<option>A</option>
<option>B</option>
</select>
<br>
<select name='baa' class="center">
<option>C</option>
<option>D</option>
</select>
<br>
</div>
I have following markup that renders HTML dropdown. On my web page the dropdown is placed at extreme right side of the container. Dropdown contains some lengthy text.
When open in chrome, dropdown opens correctly starting from right towards left, thus showing the lengthiest option clearly. Where in firefox dropdown starts off from left towards right, thus some of the option text goes out of the screen.
Is there any way/css to change this behavior in firefox.
<div style="float:right;">
<select id="select_1" style="width:100px;" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</div>
Just use this may help you
#-moz-document url-prefix() {
select {
direction: rtl;
}
option{
text-align: left;
}
}
The problem is caused by setting the select element with a fixed width (100px)
Remove that and the select element will work correctly in all browsers.
Fiddle
If it's important for you to keep the width, then you can use firefox-only CSS to change the width back to auto in Firefox.
NB: It is generally frowned upon to rely on hacks like these in production code. Use with caution!
Fiddle
select {
width: 100px;
}
/* firefox-only CSS..
WARNING: Use at your own risk */
#-moz-document url-prefix() {
select {
width: auto;
}
}
<div style="float:right;">
<select id="select_1" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</div>
I have dropdown in my HTML Page which has width more than 250px.
I need to change the dropdown font size so that the width gets reduced.
I tried using the font tag like below:
<font size='6'>
<select>
<option></option>
.
.
.
</select>
</font>
The above code didn't work.
When I tried reducing the width by hardcoding the value as width='50' it hides the full text of all the dropdown which becomes hard to select an particular option.
Suggest a solution so that width gets reduced and all the options visible in the dropdown.
Note: it should be compatible in IE8
To change the font size, just apply font-size:XXpx; css property:
<select style="font-size:6px;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
Or, if you want to put it in your stylesheet:
select{
font-size:6px;
}
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
Use CSS font-size Rule on your select-element
<select style="font-size: 6px">
<option>ABC</option>
<option>ABC</option>
<option>ABC</option>
<option>ABC</option>
</select>
Here's a Fiddle
You can use CSS for that.
Example: https://jsfiddle.net/9ddaexpz/
HTML:
<select id="myDropdown">
<option>foo</option>
<option>bar</option>
</select>
CSS:
#myDropdown
{
font-size: 6px;
}
try this simple method
external style sheet method
select{font-size:6px;}
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
Inline style sheet method
<select style="font-size:6px">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
In select tag use the css style given below.
<select style="font-size:6px">
<option></option>
.
.
.
</select>
Just wondering if anyone knows if it is possible to alter the background colour of a arrow of a html select box using just CSS?
I'm trying to achieve:
http://i.stack.imgur.com/VBjpp.png
So far I've got:
css:
.sort-by select {
width:100px;
border:0px;
background-color:#f4f4f4;
color:#303030;
padding:5px;
}
html:
<select title="Sort By">
<option value="" selected="selected">Value 1</option>
<option value="">Value 2</option>
<option value="">Value 3</option>
</select>
Which gives me:
http://i.stack.imgur.com/Xj8yF.png
However I can't seem to find a way to alter just the background colour behind the arrow? Anyone got any advice that would be great! Thanks