onfocus для ввода формы, чтобы изменить цвет границы? - PullRequest
Новая
       5

onfocus для ввода формы, чтобы изменить цвет границы?

6 голосов
/ 06 января 2011

Я пытаюсь добавить цветную границу к полю формы, когда пользователь нажимает на поле, я хорошо разбираюсь в html и javascript, с небольшим количеством php, но мой css на самом деле довольно плохой. Код для формы и т. Д. Ниже. Я был бы очень признателен, если бы кто-нибудь мог направить или помочь мне. КОД: 

<form id="search" action="http://www.bkslap.com/search/results.php" id="cse-search-box">
<input name="q" type="text" id="q" autocomplete="on" size="56"  style="color:#ccc;" maxlength="128" id="q"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#ccc';"
onfocus="this.value=''; this.style.color = '#9933FF';"
value="Search" />
</form>

Есть мысли?

Ответы [ 6 ]

10 голосов
/ 06 января 2011

Вероятно, было бы чище добавить и вычесть класс с помощью onBlur и onFocus.Тогда в классе css вы можете иметь: 

.focus {
background: yellow;
color: #000;
border: 1px solid red;
}

Проверьте здесь для получения дополнительной информации о свойствах границы.(с извинениями тем, кто ненавидит w3schools, но это разумное место для такого типа ссылок).

http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/

9 голосов
/ 27 сентября 2012

Просто используйте CSS для цвета контура, вот так: 

.class {
    outline-color:#FF0;
}
7 голосов
/ 06 января 2011

вы можете использовать :focus псевдокласс #q:focus {border:red 1px solid;}, но, как вы видите здесь http://www.quirksmode.org/css/contents.html, он не поддерживается, например, 7 и ниже.Для достижения кросс-браузерной совместимости вы можете использовать jquery и следующий код 

$('#q').focus(function() {
    $('#q').css('border','1px solid red');
});
0 голосов
/ 30 августа 2018 
input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus {
    border-color: #81256f;
    box-shadow: none;
}

Используйте этот CSS.Это сделает работу за вас.С помощью вышеуказанного CSS я получил следующий результат: enter image description here

Надеюсь, это помогло вам: -)

0 голосов
/ 27 июля 2013

Ответ от Карла-Майкла Хьюза - это то, что, наконец, сработало для меня! Цвет контура - это единственный способ установить цвет фокуса «рамки». Спасибо!

0 голосов
/ 06 января 2011

Я не рекомендую использовать встроенный стиль, подобный этому, и даже рекомендовал бы связывать события через javascript / jquery, но ...

Вы можете установить цвет фона с object.style.borderColor.Цвет - это только цвет шрифта.

Разметка CSS в сокращенном виде это просто 'border' или, в частности, если вы хотите установить цвет рамки из css, это 'border-color'.В JavaScript, который превращается в this.style.borderColor.

...