form focus

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Piet Jansen

Piet Jansen

04/01/2012 18:47:56
Quote Anchor link
Hallo,

Ik probeer dus een focus effect te creëren voor mijn forms, maar het wil niet echt lukken.

Mijn CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
.textfield_username {
width: 272px;
height: 72px;
background: url(img/register_form.png) no-repeat;
float: left;
position: absolute;
margin-left: -5px;
margin-top: 375px;
}

.textfield_username:hover {
width: 272px;
height: 72px;
background: url(img/register_form_hover.png) no-repeat;
float: left;
position: absolute;
margin-left: -5px;
margin-top: 375px;
}

.textinput_username {
width: 242px;
height: 27px;
background: none;
border: none;
font: Arial;
font-size: 14px;
color: #777777;
margin-top: 21px;
margin-left: 10px;
margin-right: 10px;
}

.textfield_password {
width: 272px;
height: 72px;
background: url(img/register_form.png) no-repeat;
float: left;
position: absolute;
margin-left: 261px;
margin-top: 375px;
}

.textfield_password:hover {
width: 272px;
height: 72px;
background: url(img/register_form_hover.png) no-repeat;
float: left;
position: absolute;
margin-left: 261px;
margin-top: 375px;
}

.textinput_password {
width: 242px;
height: 27px;
background: none;
border: none;
font: Arial;
font-size: 14px;
color: #777777;
margin-top: 21px;
margin-left: 5px;
margin-right: 10px;
}

.textfield_email {
width: 272px;
height: 72px;
background: url(img/register_form.png) no-repeat;
float: left;
position: absolute;
margin-left: 527px;
margin-top: 375px;
}

.textfield_email:hover {
width: 272px;
height: 72px;
background: url(img/register_form_hover.png) no-repeat;
float: left;
position: absolute;
margin-left: 527px;
margin-top: 375px;
}

.textinput_email {
width: 242px;
height: 27px;
background: none;
border: none;
font: Arial;
font-size: 14px;
color: #777777;
margin-top: 21px;
margin-left: 5px;
margin-right: 10px;
}

.textfield_search {
width: 196px;
height: 55px;
background: url(img/search_form.png) no-repeat;
float: left;
position: absolute;
margin-left: 187px;
margin-top: 13px;
}

.textfield_search:hover {
width: 196px;
height: 55px;
background: url(img/search_form_hover.png) no-repeat;
float: left;
position: absolute;
margin-left: 187px;
margin-top: 13px;
}

.textinput_search {
width: 174px;
height: 27px;
background: none;
border: none;
font: Arial;
font-size: 14px;
color: #777777;
margin-top: 7px;
margin-left: 10px;
margin-right: 10px;
}

.textfield_login {
width: 104px;
height: 55px;
background: url(img/login_form.png) no-repeat;
float: left;
position: absolute;
margin-left: 680px;
margin-top: 13px;
}

.textfield_login:hover {
width: 104px;
height: 55px;
background: url(img/login_form_hover.png) no-repeat;
float: left;
position: absolute;
margin-left: 680px;
margin-top: 13px;
}

.textinput_login {
width: 82px;
height: 27px;
background: none;
border: none;
font: Arial;
font-size: 14px;
color: #777777;
margin-top: 7px;
margin-left: 10px;
margin-right: 10px;
}

.textfield_login_password {
width: 104px;
height: 55px;
background: url(img/login_form.png) no-repeat;
float: left;
position: absolute;
margin-left: 789px;
margin-top: 13px;
}

.textfield_login_password:hover {
width: 104px;
height: 55px;
background: url(img/login_form_hover.png) no-repeat;
float: left;
position: absolute;
margin-left: 789px;
margin-top: 13px;
}

.textinput_login_password {
width: 82px;
height: 27px;
background: none;
border: none;
font: Arial;
font-size: 14px;
color: #777777;
margin-top: 7px;    
margin-left: 10px;
margin-right: 10px;
}


Hier zijn alle forms van mijn pagina. De hover effecten zijn allemaal te zien, maar als ik bijv.

.textfield_username:focus {
width: 272px;
height: 72px;
background: url(img/register_form_hover.png) no-repeat;
float: left;
position: absolute;
margin-left: -5px;
margin-top: 375px;
}

probeer, lukt het weer niet, dan komt het gewoon niet in beeld. Hoe kan ik zowel het hover als focus effect laten werken?

Mvg,
Piet
 
PHP hulp

PHP hulp

04/11/2024 21:57:16
 
- SanThe -

- SanThe -

04/01/2012 19:31:45
Quote Anchor link
Ik geloof niet dat focus een css ding is.
 
Eddy B

Eddy B

04/01/2012 19:33:14
Quote Anchor link
Inderdaad, focus kan niet in CSS.

- oeps. weer wat geleerd.
Gewijzigd op 04/01/2012 19:36:09 door Eddy B
 
Wouter J

Wouter J

04/01/2012 19:34:39
Quote Anchor link
@SanThe, dat is het wel.
@Eddy, als je het zo zeker weet ben ik wel benieuwd wat je dan in de CSS2 selector specs ziet staan...

@Piet, heb je dan wel :focus na :hover staan in de stylesheet? Of staat het ervoor? Want anders werkt het inderdaad niet.
En kun je misschien een voorbeeldje maken op http://tinkerbin.com/ deze opslaan en het linkje hier plaatsen, dan kan ik aan het spelen gaan om het wel te laten werken.
Gewijzigd op 04/01/2012 19:36:02 door Wouter J
 
Piet Jansen

Piet Jansen

04/01/2012 20:00:29
Quote Anchor link
Hier het voorbeeldje. Ook hier is dus te zien dat ik focus na hover gebruik, maar nope, geen resultaat.

Als je het kunt fixen ben ik erg blij;)

http://tinkerbin.com/RsC1SbyW

Die andere twee, misschien moeten jullie zelf eerst iets nieuws leren alvorens je meteen zo reageert?
 
Wouter J

Wouter J

04/01/2012 20:06:52
Quote Anchor link
@Piet, een div kan je ook niet focussen hè. Een focus is als je zo'n verticaal streepje ziet verschijnen. Je moet dus niet op de div, maar op de input veld zo'n focus zetten.

Helaas komt er pas met CSS4 een parent selector. En dat duurt nog heel wat jaartjes, aangezien CSS3 nog niet officieel uit is.
Dus je zult je code zo moeten maken dat de focus op het input element de background style doet veranderen.
 
Erwin Goossen

Erwin Goossen

04/01/2012 20:19:32
Quote Anchor link
Je hebt overigens ongelooflijk veel overkill in je css staan. Alles wat in je class staat en niet wijzigt tijdens bv een hover hoef je niet nogmaals te definieren.
Je krijgt dan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
.textfield_username {
width: 272px;
height: 72px;
background: url(img/register_form.png) no-repeat;
float: left;
position: absolute;
margin-left: -5px;
margin-top: 375px;
}

.textfield_username:hover {
background: url(img/register_form_hover.png) no-repeat;
}

Hierdoor wordt je code een stukje leesbaarder, korter en dus sneller laadbaar.
Gewijzigd op 04/01/2012 20:20:28 door Erwin Goossen
 
Piet Jansen

Piet Jansen

05/01/2012 15:19:22
Quote Anchor link
Wouter en Erwin, hartelijk dank voor de hulp, ik zal ernaar kijken.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.