I'm trying to make dropbox or comboBox with select-option
I want to put space between select and first child(option).
I tried
<select>
<option style={{ marginTop: "100px" }} value="Test">test</option>
<option value="Test">test</option>
</select>
But failed.
Any ideas?
There are only a few style attributes that can be applied to an element.
This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.
Unfortunately, webkit browsers do not support styling of option tags yet.
you may find similar question here
How to style a select tag's option element?
Styling option value in select drop down html not work on Chrome & Safari
The most widely used cross browser solution is to use ul li
Hope that helps!!!!
Related
Working with PrimeNg with the current version 8.0.2 I'm experiencing layout problems with the searchbox inside a listbox. Apparently this was resolved in 3077.
I've created a stackblitz example so you can see it.
The html code is:
<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name"
[listStyle]="{'max-height':'150px', 'width':'300px'}">
<p-header>
Cities
</p-header>
</p-listbox>
Is the bug back? Am I missing something?
Thanks for your help!
As seen in the documentation, the problem is mixing the properties [style] and [listStyle].
style - Inline style of the container.
styleClass - Style class of the container.
listStyle - Inline style of the list element
.
So the inline style should be splited in 2 different attributes:
<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name"
[listStyle]="{'max-height':'150px'}"
[style]="{'width':'300px'}">
<p-header>
Cities
</p-header>
</p-listbox>
I have strange IE behavior on cursor property css?
Here is the code, this is just simple inline style to show what is the problem?
<div style="width:100%;">
<select>
<option value="">Select</option>
<option>John</option>
<option>John</option>
<option>John</option>
<option>John</option>
<option>John</option>
<option>John</option>
</select>
</div>
<textarea style="cursor:not-allowed;"></textarea>
All i working OK in Firefox and Google Chrome, only in IE is the problem, when option get over textarea cursor change style to not allowed? Please take a look at fiddle here but only in IE?
Working fiddle
http://jsfiddle.net/f6paL8sc/
It seems this is a IE related Bug. I've made a solution and it works *(*IE required a .cur file to work ); but lets check the DEMO first.
In this example I used disabled attribute to disabled the textarea because you are using cursor:not-allowed which gives a impresson of that field is disabled.
Download this PNG image and convert it into (.cur) using this Online tool
Here is the CSS used.
textarea[disabled]
{
display:block;
cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-cute/cute25.gif'), url('cute25.cur'), wait;
background:gold;
}
In HTML code I disabled the textarea which makes more sense here.
<textarea disabled>This TextArea is disabled</textarea>
NOTE: I haven't got chance to test on IE but it must work.
I would like to use css3 features to hiding previous element.
Basically,
I want to use a checkbox to hide previous sibling element without using javascript.
I have prepared a sample for entry point.
http://cssdesk.com/5zccy
Thanks
Edit:
I have changed sample.
My usecase: I want to have collapsible sections at my site. Two area separated by a simple checkbox and checking it will beautifully hide previous sibling.
I believe that using pure css will let me to reduce using javascript for this task.
You can not hide the previous elements - just the following ones with the general sibling selector
DEMO
Then you might be able to position the elements, so on the actual page the checkbox will appear after the .parent div.
There's no css selector to select the previous tag of a matched element. The closest you can get using only css it's doing that for the next element:
<input class="hider" type="checkbox" /> child
<div class="parent">
Parent
</div>
.hider:checked + * {
display:none;
}
On my site css file i have it so all form input backgrounds (textareas, dropdowns etc) have a background color black attribute.
However on one page I'm trying to do a color section dropdown, with the background of each option a different color, eg: blue
This works, when the dropdown is opened, but when i select it, it doesnt show the background color in the currently selected field. Im not sure if the CSS is overriding it or what.
Anyone know how to bypass this?
(Tried to explain best I could)
This is in my css file:
input,textarea,input,select,input,checkbox {
font-size:12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
color:#98925C;
background-color:#000;
border:1px solid #413E22
}
and the code im using on my html page to make the form:
<select size="1" name="color">
<option value=blue style='background-color:blue'>blue</option>
<option value=red style='background-color:red'>red</option>
</select>
etc
When the <select> is open, you are seeing the <option> elements and their respective background colors. When you select an option, the <select> element closes its options, leaving you looking at only the <select> element. It makes sense that the <option> background-color does not affect the closed <select> element.
That being said, this looks like a solution:
<select onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
Internet explorer 6 seems totally ignore CSS classes or rules on select, option or optgroup tags.
Is there a way to bypass that limitation (except install a recent version of IE) ?
Edit : to be more precise, I'm trying to build a hierarchy between options like that example:
Here's the HTML snippet :
<select name="hierarchicalList" multiple="multiple">
<option class="group niv0">Os developers</option>
<option class="group niv1">Linux</option>
<option class="user niv2">Linus Torvald</option>
<option class="user niv2">Alan Cox</option>
<option class="group niv1">Windows</option>
<option class="user niv2">Paul Allen</option>
<option class="user niv2">Bill Gates</option>
<option class="group niv1">Mac Os</option>
<option class="user niv2">Steve Wozniaz</option>
</select>
And here's CSS rules, that works fine on a recent browser (like FF3) but not working at all on IE6 :
select option {
line-height: 10px;
}
select option.group {
font-weight: bold;
background: url(path_to_group_icon.gif) no-repeat;
padding-left: 18px;
}
select option.user {
background: url(path_to_user_icon.gif) no-repeat;
padding-left: 18px;
}
select option.niv0 { margin-left: 0px; }
select option.niv1 { margin-left: 10px; }
select option.niv2 { margin-left: 20px; }
A very detailed guide to what does and does not work with form element styling is in the articles here and here. From my commercial experience cross-browser form layouts that work on IE6 are not imposssible (although you do need to test carefully). An executive summary is that you can control sizes and colours but trying to micro-manage things like text alignment is a losing battle.
This won't do exactly what you want, but rather than using CSS, you could just use a number of
  ;
for the indents, or dashes so:
Level 1
-Level 2
--Level 3
etc.
If you don't particularly like that, you could surround them with
<!--[if lt IE 7]><![endif]-->
or
<!--[if IE 6]><![endif]-->
So it would look like
Level 1
<!--[if lt IE 7]>-<![endif]-->Level 2
<!--[if lt IE 7]>--<![endif]--> Level 3
Then you could have the CSS for modern browsers.
Take a look at the optgroup tag to group entries inside a select tag.
Look here: http://www.netmechanic.com/news/vol4/html_no20.htm for an example
From MSDN reference :
Except for background-color and color,
style settings applied through the
style object for the option element
are ignored. In addition, style
settings applied directly to
individual options override those
applied to the containing SELECT
element as a whole.
Ok, so... There's no way to get that working on IE...
Thanks Matt for the nbsp; idea. I will surely use that work-around.
IE6 css implementation for options is buggy (as is the css implementation as a whole for IE6) But you CAN style options with css. I just tested changing option and select tags bgcolor and it worked as expected. The only component I know of that can not be styled is the file input.
Yes you can style them (to some extent). I sometimes change the font, background-color and color styles.
What were you trying to achieve?
CSS and HTML snippets would be useful.
You could emulate the whole thing using a drop-down menu script instead. It would give you complete control.