How can I style both the <select> HTML tag, and the <select multiple="multiple"> HTML tag while both of the tags reside under a <form> tag? Of course styling within CSS. If someone knows how to accomplish this, may someone give me an example?
Thank you!
Aaron
You can use classes fairly easily:
.singleSelect {
width: 200px;
}
.singleMultiple {
width: 300px;
}
<form>
<select class="singleSelect">
<option>Test</option>
</select>'
<br/>
<select class="singleMultiple" multiple="multiple">
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
</form>
http://jsfiddle.net/GyxL4/
A more advanced selector may be used on the select[multiple], but beware, legacy browsers (EDIT: apparently only IE6) may not always support the attribute selector, and in the first example below, you're styling every SELECT element on the page (this is called an element selector):
select {
width: 200px;
}
select[multiple] {
width: 300px;
}
See: http://www.w3.org/TR/CSS2/selector.html
Related
I have some code like this:
<form>
<select name="slctr__lvl1">
<option selected>aaa</option>
<option value="1">1</option>
</select>
</form>
I tried doing the CSS in these ways:
[name="slctr__lvl1"] {
width: 150px;
}
and:
select {
width: 150px;
}
and:
font select {
width: 150px;
}
but none worked. I want it to look like I wrote:
<form>
<select name="slctr__lvl1" style="width: 150px">
<option selected>aaa</option>
<option value="1">1</option>
</select>
</form>
but the CSS seems to have no effect.
You can use CSS Attribute Selectors:
The [attribute="value"] selector is used to select elements with a specified attribute and value.
Try as the following:
form select[name="slctr__lvl1"] {
width: 150px;
}
<form>
<select name="slctr__lvl1">
<option selected>aaa</option>
<option value="1">1</option>
</select>
</form>
You can also read further on MDN's Attribute selectors documentation.
CSS attribute selector needs HTML tag before attribute
CSS Attribute selector
https://www.w3schools.com/css/css_attribute_selectors.asp
CSS all selector types
https://www.w3schools.com/cssref/css_selectors.asp
have a look to the following example, I tried to make it work as you did, and if you compare my example with yours you will have the difference that why your code is not working
select[name=slctr__lvl1] {
background-color: yellow;
}
select{
color: red;
}
select {
width: 200px;
}
<select name="slctr__lvl1">
<option selected>aaa</option>
<option value="1">1</option>
</select>
PS: I didn't understand what you want to achieve with this.
font select {
width: 150px;
}
I think this is just a typo, You want to add form, not the font I think
Give the select box a class:
.selectBox{
width: 400px;
}
<form>
<select class="selectBox" name="slctr__lvl1">
<option selected>aaa</option>
<option value="1">1</option>
</select>
</form>
I am trying to use pseudo elements with <option> element. However I am observing a few differences in rendering with different browsers.
So my question is, when is it allowed to use pseudo elements such as ::before, ::after and ::first-letter with an <option> element?
Context
Let's say I have three option elements,
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I want to add some content before and after the certain elements using ::before and ::after selectors. So I will add a CSS class "special" to one of the elements and add a CSS rule like so,
.special::before {
content: " Before - ";
}
.special::after {
content: " - After ";
}
<select>
<option value="1" class="special">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
It doesn't work in any of the browsers. However, now if I simply modify the select element to allow multiple selections, the pseudo elements will work in Chrome, Firefox and Edge, but still not in IE 11.
.special::before {
content: " Before - ";
}
.special::after {
content: " - After ";
}
<select multiple>
<option value="1" class="special">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I am able to apply different styles, such as color, font-family, font-size and even display on these pseudo elements!
.special::before {
content: " Before - ";
color: red;
font-size: 15px;
}
.special::after {
content: " - After ";
font-family: Consolas, Arial, Verdana;
display: block;
color: blue;
}
<select multiple>
<option value="1" class="special">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
However, the found that the behavior is not completely consistent with Chrome, Firefox and Edge either.
For example, in Chrome, if I use the ::first-letter pseudo element, it works for option elements under a select element, but not under an optgroup element. However it works fine with both Firefox and Edge.
.special::first-letter {
color: red;
font-size: 20px;
}
select {
height: 100px;
}
<select multiple>
<option value="1" class="special">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select multiple>
<optgroup label="Item 1">
<option value="1" class="special">One</option>
</optgroup>
<optgroup label="Other items">
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
</select>
Note: None of this works when the option element is used within a datalist element. But I am not concerned with that at the moment. I have some examples here in case you wish to see.
Upon searching I found that <option> element is considered a replaced element only in certain cases. However I wasn't able to find any documentation online as to when it is allowed to use pseudo elements with it.
The short answer, if you're looking for a standards-based answer, is that CSS does not currently support using pseudo-elements with form elements, be it ::before/::after, or other pseudo-elements such as ::first-letter. As a result, every browser does its own thing, and there is little to no interop.
As stated, there is no specification for the interaction between most pseudo-elements and form elements and/or replaced content The only statement in any spec for this is in css-content-3, which says:
Note: Replaced elements do not have ::before or ::after pseudo-elements; the content property replaces their entire contents.
But it gets worse: strictly speaking, form elements aren't the same thing as replaced content (despite many people, myself included, often stating the contrary), even though they behave very similarly. Form elements just happen to have platform-specific layout rules that prevent them from being completely styleable with CSS. They may support some common CSS properties and adhere to the box model to some extent, but they have limitations that prevent you from treating them fully as a regular, non-replaced element. This is really the only thing they have in common with replaced content.
To top it all off, the rendering of form elements is not covered in any current CSS spec. Work is being done to try and rein this all in in css-ui-4, but I'm not holding my breath.
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>
Anyone know what's causing this extra left 'padding' on the input? The inspector isn't reporting that anything is actually causing it. Can't say I've run into this issue before…
The top field is a text input (search), the bottom field is a select
Apparently the HTML code is the key to solving the problem, here you go:
<input type="search" placeholder="Search" />
<select>
<option value="ir35">IR35</option>
</select>
Edit to add:
I was a bit of a doofus, but the problem still remains. In experimenting with different input types I'd created two templates. The isse is actually on an input[type="search"] - NOT text. This is an issue with the search type. However I am already applying -webkit-appearance: textfield is there something else I'm missing? There's no actualy 'thing' causing the padding, text indent, padding, etc. It's just 'there'.
Edit:
My solution will be dropping search in favour of text - it's a workaround but it'll do.
select elements and input elements operate, I believe, under different box-models.
box-sizing:border-box is the default on select elements.
You can check this by looking in the "Computed Styles" when using Developer Tools
Setting box-sizing:border-box on both should fix it.
DEMO Without
select,
input {
display: block;
width: 200px;
}
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
<input type="text" />
DEMO With
select, input {
display: block;
width: 200px;
box-sizing:border-box;
}
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
<input type="text" />
The styling of certain form elements like input and select is not specified in the CSS specification and is left up to the discretion of the browser developer, so there will be slight style variations across browsers.
In Firefox, you can make some hard-coded style adjustments to fix the padding issue that you are seeing.
For example, if you add padding-left: 3px to the input field, then the text value will line up with the option value displayed in the select box.
However, since padding cannot be negative, you can eliminate the left padding in the select element, though you can in the option element.
select,
input {
display: block;
width: 200px;
box-sizing: border-box;
}
select {
padding-left: 0px;
}
input {
padding-left: 3px;
}
<input type="text" value="Option 1" />
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
I want to give ListBox width in HTML5.
Please give me some idea.
You can style it as a regular input - all CSS properties applicable to it
DEMO
CSS
input[list] {
width: 300px;
}
HTML
<input type="text" list="browsers" />
<datalist id="browsers">
<option> Chrome </option>
<option> Firefox </option>
<option> IE9 </option>
</datalist>
You can try with
style="width:150px;"
CSS
#example {
width: 300px;
}
HTML
<select size="4" id="example" name="example">
<option selected>Fries</option>
<option>Drink</option>
<option>Pie</option>
<option>Salad</option>
<option>Shake</option>
</select>
For completeness and to show an actual HTML5 Listbox (no JS needed).