Форум

рони · #1 (**permalink**) 11.12.2010, 15:39

В 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>

monolithed · #2 (**permalink**) 11.12.2010, 16:58

Давно копал тему стилизации форм/селектов и пр., приходилось решать альтернативным путем. Могу предложить сделать на подобии такой реализации:

<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>

рони · #3 (**permalink**) 11.12.2010, 17:45

monolithed,
Спасибо за вариант замены селекта, но хотелось бы побороть глюк оперы с option.

monolithed · #4 (**permalink**) 11.12.2010, 18:02

<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>

рони · #5 (**permalink**) 11.12.2010, 18:50

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>

monolithed · #6 (**permalink**) 11.12.2010, 19:11

<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>

рони · #7 (**permalink**) 11.12.2010, 19:57

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>

monolithed · #8 (**permalink**) 11.12.2010, 20:10

Сообщение от рони

опера не сдаётся )))

тоже не ожидал от нее таких сюрпризов

<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>

Форум

Справочник

Discord чат

Курсы javascript