form element mobile
Op de mobiele versie van mijn site gebeurt er iets raars als er ge-submit word met de style van het <form> element.
Er word een border getoond want ik maar niet weg krijg zie afbeeling
Dit gebeurt alleen als er op de winkelwagen word geklikt. borders uitschakelen werkt helaas niet.
Weet iemand hoe je dit weg krijgt ?
Met vriendelijke groet,
Jop
Met een plaatje is het lastig zien hoe dit stukje layout wordt opgebouwd.
HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<form name="product_adding" method="post" action="">
<input type="hidden" name="artid" value="12462">
<div class="orderandquantity">
<div class="order_container">
<div class="quantity">
<input type="text" name="quantity" class="quantity_artpage" value="1">
</div>
<span class="quantity_cross">X</span>
<input name="orderbutton" type="submit" class="orderbut" style="float:none;" value="In winkelwagen" onclick="$.add2cart( 'product_12462', 'cart')">
</div>
</div>
</form>
<input type="hidden" name="artid" value="12462">
<div class="orderandquantity">
<div class="order_container">
<div class="quantity">
<input type="text" name="quantity" class="quantity_artpage" value="1">
</div>
<span class="quantity_cross">X</span>
<input name="orderbutton" type="submit" class="orderbut" style="float:none;" value="In winkelwagen" onclick="$.add2cart( 'product_12462', 'cart')">
</div>
</div>
</form>
CSS:
Code (php)
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
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
.orderandquantity{
background-color: #e4e6e6;
height: 50px;
box-sizing: border-box;
padding: 8px 10px
}
.order_container{
float:right;
}
.quantity{
float:left;
}
.quantity_artpage{
height: 35px;
width: 37px;
border: 1px solid #C9C9C9;
border-radius: 3px;
text-align: center;
padding-top: 2px;
display: inline-block;
vertical-align: middle;
box-shadow: inset 0 0 5px 0px #CDCDCD;
box-sizing: border-box;
}
.quantity_cross{
display: inline-block;
margin-left: 10px;
margin-right: 10px;
margin-top:10px;
}
.orderbut,.orderbut:visited{
background: -webkit-linear-gradient(#ffc000, #ffa700);
background: -o-linear-gradient(#ffc000, #ffa700);
background: -moz-linear-gradient(#ffc000, #ffa700);
background: linear-gradient(#ffc000, #ffa700);
background: -webkit-linear-gradient(#ffc000, #ffa700);
background: -o-linear-gradient(#ffc000, #ffa700);
background: -moz-linear-gradient(#ffc000, #ffa700);
background: linear-gradient(#ffc000, #ffa700);
color: #fff;
text-decoration: none;
text-align: center;
cursor: pointer;
border: 0;
display: inline-block;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 12px;
padding-right: 12px;
font-size: 14px;
border-radius: 3px;
margin-top: -4px;
vertical-align: middle;
padding: 10px 20px 10px 20px;
box-sizing: border-box;
height: 35px;
}
background-color: #e4e6e6;
height: 50px;
box-sizing: border-box;
padding: 8px 10px
}
.order_container{
float:right;
}
.quantity{
float:left;
}
.quantity_artpage{
height: 35px;
width: 37px;
border: 1px solid #C9C9C9;
border-radius: 3px;
text-align: center;
padding-top: 2px;
display: inline-block;
vertical-align: middle;
box-shadow: inset 0 0 5px 0px #CDCDCD;
box-sizing: border-box;
}
.quantity_cross{
display: inline-block;
margin-left: 10px;
margin-right: 10px;
margin-top:10px;
}
.orderbut,.orderbut:visited{
background: -webkit-linear-gradient(#ffc000, #ffa700);
background: -o-linear-gradient(#ffc000, #ffa700);
background: -moz-linear-gradient(#ffc000, #ffa700);
background: linear-gradient(#ffc000, #ffa700);
background: -webkit-linear-gradient(#ffc000, #ffa700);
background: -o-linear-gradient(#ffc000, #ffa700);
background: -moz-linear-gradient(#ffc000, #ffa700);
background: linear-gradient(#ffc000, #ffa700);
color: #fff;
text-decoration: none;
text-align: center;
cursor: pointer;
border: 0;
display: inline-block;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 12px;
padding-right: 12px;
font-size: 14px;
border-radius: 3px;
margin-top: -4px;
vertical-align: middle;
padding: 10px 20px 10px 20px;
box-sizing: border-box;
height: 35px;
}
Heb je al eens goed gekeken met de inspector (F12) wat er dan veranderd?