Mobile Forms Select is not the same size as Input or textarea
I have a mobile page including a form. I need to align the select and input/textarea and make them the same size but it's not working properly. (see image)
As you can see in the screenshot, the dropdown is not the same size as the input or textarea. Here's my code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<style type="text/css">
select, input, textarea {
border: solid 0.1em black;
font: normal 1.5em Arial;
开发者_JAVA百科 margin: 0.3em 0;
padding: 0.2em;
}
.em { width: 11em; }
.px { width: 150px; }
.percent { width: 50%; }
</style>
<select name="option1" class="em">
<option value="" selected="">= choose =</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input name="input" type="text" value="" class="em" />
<textarea class="em"></textarea>
<hr />
<select name="option1" class="px">
<option value="" selected="">= choose =</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input name="input" type="text" value="" class="px" />
<textarea class="px"></textarea>
<hr />
<select name="option1" class="percent">
<option value="" selected="">= choose =</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input name="input" type="text" value="" class="percent" />
<textarea class="percent"></textarea>
</body>
</html>
What am I doing wrong or what should I do?
Here's what you have to do:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<style type="text/css">
body {
margin: 0;
padding: 0.3em;
}
form {
padding: 0px;
margin: 0px;
}
select, input,textarea {
border: solid 1px #888;
display: block;
font: normal 1.4em Arial;
max-width: 100% !important;
margin: 0.2em 0 !important;
padding: 0.1em 0 !important;
text-indent: 0 !important;
white-space: nowrap;
text-overflow:ellipsis;
width: 98% !important;
outline: none;
word-wrap: break-word;
word-wrap: break-all;
white-space: nowrap;
ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
}
</style>
<form>
<select name="option1" class="em">
<option value="" selected="">= choose =</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input name="input" type="text" value="" />
<input name="input" type="email" value="" />
<input name="input" type="url" value="" />
<input name="input" type="tel" value="" />
<textarea class="em"></textarea>
</form>
</body>
</html>
The select box is not 100% aligned but it's pretty close.
加载中,请稍侯......
精彩评论