Как установить в opera option background-color?
В opera селектор выводиться бесцветным, есть ли какой способ сделать его цветным?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<center><form name="f" action="http://">
</form></center>
<script type="text/javascript">
var c = document.createElement("select"),
col=['333333','444444','555555','666666','777777','888888','999999',
'aaaaaa','bbbbbb','cccccc','dddddd','eeeeee','ffffff','220000',
'330000','440000','550000','660000','770000','880000','990000',
'aa0000','bb0000','cc0000','dd0000','ee0000','ff0000','002200',
'003300','004400','005500','006600','007700','008800','009900',
'00aa00','00bb00','00cc00','00dd00','00ee00','00ff00','000022',
'000033','000044','000055','000066','000077','000088','000099',
'0000aa','0000bb','0000cc','0000dd','0000ee','0000ff','111100',
'222200','333300','444400','555500','666600','777700','888800',
'999900','aaaa00','bbbb00','cccc00','dddd00','eeee00','ffff00',
'110011','220022','330033','440044','550055','660066','770077',
'880088','990099','aa00aa','bb00bb','cc00cc','dd00dd','ee00ee',
'ff00ff','001111','002222','003333','004444','005555','006666',
'007777','008888','009999','00aaaa','00bbbb','00cccc','00dddd',
'00eeee','00ffff','221100','442200','663300','884400','aa5500',
'cc6600','ee7700','ff8800','220011','440022','660033','880044',
'aa0055','cc0066','ee0077','ff0088','002211','004422','006633',
'008844','00aa55','00cc66','00ee77','00ff88','112200','224400',
'336600','448800','55aa00','66cc00','77ee00','88ff00','110022',
'220044','330066','440088','5500aa','6600cc','7700ee','8800ff',
'001122','002244','003366','004488','0055aa','0066cc','0077ee',
'0088ff'];
for ( var n=0; n<col.length; n++)
{var o = document.createElement("option");
o.appendChild(document.createTextNode(col[n]));
o.setAttribute("value", col[n]);
o.setAttribute("style","background-color: #"+col[n]);
c.appendChild(o);
}
document.f.appendChild(c);
</script>
</body>
</html>
|
Давно копал тему стилизации форм/селектов и пр., приходилось решать альтернативным путем. Могу предложить сделать на подобии такой реализации:
<style type="text/css">
#select {
background: url('http://png-4.findicons.com/files/icons/2212/carpelinx/16/2downarrow.png') 100% 50% no-repeat;
border: 1px solid #DDD;
color: #747474;
cursor: pointer;
padding-left: 8px;
user-select: none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select: none;
width: 101px;
height: 20px;
}
#colors {
border: 1px solid #DDD;
display: none;
overflow: auto;
width: 110px;
max-height: 150px;
}
#colors div {
width: 97px;
height: 20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var colors = document.getElementById('colors'), select = document.getElementById('select');
for(var i=0; i<10; i++){
var div = document.createElement('div');
div.style.background = '#'+i+i+i+i+i+i;
colors.appendChild(div);
}
select.onclick = function(){
colors.style.display = colors.style.display == '' ? 'block' : '';
};
};
</script>
<div id="select">--- select ---</div>
<div id="colors"></div>
|
monolithed,
Спасибо за вариант замены селекта, но хотелось бы побороть глюк оперы с option. |
<style type="text/css" media="all">
select {width: 100px;}
</style>
<script type="text/javascript">
window.onload = function(){
document.body.appendChild(document.createElement('select'));
for(var i=0; i<10; i++){
var option = document.createElement('option');
option.style.background = '#'+i+i+i+i+i+i;
document.getElementsByTagName('select')[0].appendChild(option);
}
};
</script>
|
monolithed,
Увы не помогло opera отрисует селект как надо если на странице не будет никаких других видимых элементов, иначе опционы в селекте остануться бесцветными. Для примера, смотреть в опере. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css" media="all">
select {width: 100px;}
</style>
<script type="text/javascript">
window.onload = function(){
var create_select = document.createElement('select');
document.body.appendChild(create_select);
for(var i=0; i<10; i++){
var option = document.createElement('option');
option.style.background = '#'+i+i+i+i+i+i;
document.getElementsByTagName('select')[0].appendChild(option);
}
};
</script>
</head>
<body>
<form name="f" action="http://" id="f">
<input name="nn" value="test" />
</form>
</body>
</html>
|
<style type="text/css" media="all">
select {width: 100px;}
</style>
<script type="text/javascript">
window.onload = function(){
document.getElementsByName('form1')[0].appendChild(document.createElement('select'));
for(var i=0; i<10; i++){
var option = document.createElement('option');
option.style.background = '#'+i+i+i+i+i+i;
document.getElementsByTagName('select')[0].appendChild(option);
}
};
</script>
<form name="form1" action="">
</form>
<form name="form2" action="">
<input type="text" />
</form>
|
monolithed,
опера не сдаётся ))) <html>
<head>
<title></title>
<style type="text/css" media="all">
select {width: 100px;}
</style>
<script type="text/javascript">
window.onload = function(){
document.getElementsByName('form1')[0].appendChild(document.createElement('select'));
for(var i=0; i<10; i++){
var option = document.createElement('option');
option.style.background = '#'+i+i+i+i+i+i;
document.getElementsByTagName('select')[0].appendChild(option);
}
};
</script>
</head>
<body>
<form name="form1" action="">
<input type="text" /></form>
<form name="form2" action="">
</form>
</body>
</html>
|
Цитата:
<html>
<head>
<title></title>
<style type="text/css" media="all">
select {width: 100px;}
</style>
<script type="text/javascript">
window.onload = function(){
document.getElementsByName('form1')[0].insertBefore(document.createElement('select'), document.getElementsByTagName("input")[0]);
for(var i=0; i<10; i++){
var option = document.createElement('option');
option.style.background = '#'+i+i+i+i+i+i;
document.getElementsByTagName('select')[0].appendChild(option);
}
};
</script>
</head>
<body>
<form name="form1" action="">
<input type="text" />
</form>
<form name="form2" action="">
<input type="text" />
</form>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:12. |