Jaki jest najlepszy sposób uzyskania efektu poświaty przy ustawianiu pola tekstowego w HTML? Czy można to zrobić za pomocą samego CSS, czy też dotyczy to obrazów? Sprawdź strony logowania na Twitterze i Tumblr pod kątem przykładów roboczych.Efekt świecącego pola tekstowego, takiego jak strony logowania na Twitterze i Tumblr?
Wystarczy użyć :focus pseudo-klasy, border i box-shadow:
.text:focus {
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
}
Aha, i here's my favorite combination.
Wygląda świetnie, thx – raffian
Chciałbym podejść do niego za pomocą cienia skrzynki CSS, a następnie ustawić kolor niebieski, a nie szary/czarny.
Czy możesz podać przykład? Nie jestem ekspertem od CSS! – raffian
Kilka innych osób zamieściło przykłady. Ale jeśli nie jesteś ekspertem, możesz zagrać na tej stronie. Jest świetny do tworzenia małych bitów css, takich jak cień pudełkowy. http://css3generator.com/ –
hej, to świetna strona do testowania CSS, dzięki – raffian
CSS:
#form1:focus { border: 2px solid blue; }
HTML:
<input id="form1" type="text"/>
Inne sposoby, które znalazłem:
użyć focus
Jeśli używasz cross-browser zbliża:
.active-field, .selector-for-field:focus {
-webkit-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
-khtml-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
-moz-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
-o-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
box-shadow: 0 0 3px rgb(34%, 71%, 94%);
border:1px solid rgb(34%, 71%, 94%);
}
Następnie dodać tę klasę do pola podświetlone na kliknięcie lub focus, etc, ile potrzeba.
W razie potrzeby można również pobrać specyfikę IE.
Prefixed wersje 'box-shadow' są nieaktualne; nie powinieneś ich używać. – Ryan
Nie zgadzam się - wciąż widzę stare wersje przeglądarek korzystających z naszych witryn, więc są one nadal w grze. Sugerowałbym, abyś porównał zapotrzebowanie z własnymi gośćmi, zamiast brać powyższe porady bez sprawdzania. – MyStream
Albo obrazy lub Box CSS cień http://css-tricks.com/snippets/css/css-box-shadow/
Wystarczy sprawdzić element, css to wszystko. na ': focus' zastosuj' border: 1px solid # 56B4EF; 'i' box-shadow: inset 0 1px 3px rgba (0,0,0, .05), 0 0 8px rgba (82168,236, .6); ' –
możliwy duplikat [CSS - Focus pola logowania tak jak twitter z tylko CSS?] (http://stackoverflow.com/questions/6282678/css-focus-login-fields-just-like-twitter-with-only-css) – user123444555621
@ Pumbaa80, nie duplikat, to pytanie dotyczy funkcjonalnych aspektów pól tekstowych logowania na Twitterze, a nie ich wyglądu. – raffian