2012-06-06 2 views
0
<!DOCTYPE html> 
<html> 
<body> 

<form action="form_action.asp" method="get"> 
    <span style='background-color: red;'> 
    <input style="FILTER: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);" type="checkbox" name="vehicle" value="Bike" /></span>I have a bike<br /> 

    <span style='background-color: red;'> 
    <input style="-moz-opacity:0.5" type="checkbox" name="vehicle" value="Car" /></span> I have a car <br /> 
    <input type="submit" value="Submit" /> 
</form> 

<p>Click on the submit button, and the input will be sent to a page on the server called "form_action.asp".</p> 

</body> 
</html> 

Я нашел примеры примеров в Интернете и собрал это вместе, верхний входной флажок должен работать, т. Е. И нижний для FF и хром. Ни на работе хорошо. IE выглядит неаккуратно, а FF и хром, похоже, вообще не работают. Я пытаюсь понять это для списка флажков, некоторые из которых отключены на основе предыдущих вариантов. У меня это работает для большинства браузеров, но некоторые из браузеров не сеют ящики.Change Checkbox Цвет в Javascript

Итак, мне нужно выяснить, как серые окна с помощью javascript. Кажется, что это не работает, и document.getelementbyid(elementID).style.background = "#dbdbdb"; просто очерчивает окно.

Любая помощь очень ценится

+0

Нужно ли им по-прежнему быть кликабельным? –

+0

Нет, у меня есть весь код, чтобы отключить кнопку, но только некоторые браузеры выделяют флажки, когда они отключены. – user1329307

+0

Я не понимаю. Что ты пытаешься сделать? Установите флажки? Да, для этого есть zillion плагины JS, но с чистым CSS это практически невозможно. (Вы ** можете ** найти '-vendor-appearance' полезным. Как' -webkit-appearance: checkbox'.) – Rudie

ответ

1

Ваш контрольный список не может быть доступен для просмотра?

Отключить его в качестве простого решения в некоторых браузерах, а затем увеличить непрозрачность для других браузеров:

document.getElementById(elementID).disabled="disabled"; 
document.getElementById(elementID).style.opacity="0.5"; 

Это предполагает, что ваш фон черный ... вряд ли.

В противном случае получить х, у позиции флажка:

function getOffset(el) { 
    var _x = 0; 
    var _y = 0; 
    while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 
     _x += el.offsetLeft - el.scrollLeft; 
     _y += el.offsetTop - el.scrollTop; 
     el = el.offsetParent; 
    } 
    return { top: _y, left: _x }; 
} 
var x = getOffset(document.getElementById('yourElId')).left; 

Затем создайте черный DIV с непрозрачностью с более высоким индексом г и абсолютным позиционированием перед флажком.

+0

Есть ли способ перекрестного браузера? Моя попытка выше не работает – user1329307

+0

Какую версию браузера и какой браузер вы используете? – Wagtail

+0

Посмотрите этот пример: http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency - Это примерно то, о чем я думаю. – Wagtail

0

если они отключены, то вы должны использовать «заблокировано» собственность, которая встроена в флажков. Это приведет к отключению и отключению внешнего вида.

+0

Это то, что я делаю в настоящее время, однако есть 1 или 2 браузера, которые отключают окно, но НЕ дают им отключенный внешний вид. – user1329307

+0

@ user1329307 вы можете попробовать использовать пользовательский отключить CSS 'input: disabled' – ajax333221

+0

Если вы ищете совершенство, то вы не добьетесь этого благодаря стандартным средствам управления браузером. Они широко варьируются даже между версиями браузера, добавив браузер/ОС поверх этого, и это кошмар. Похоже на то, что вы действительно хотите, это согласованность, и вы можете иметь это только с пользовательскими элементами формы. Там есть множество путеводителей и еще больше готовых решений. Возможно, вам стоит потратить время на изучение этого варианта? – BlakeGru

Смежные вопросы