[英]Formatting jQuery Mobile Labels and their input boxes
I've got a label and an input box in jquery and wish to format it into a certain but that is looking to be impossible. 我在jquery中有一个标签和一个输入框,希望将其格式化为特定格式,但这似乎是不可能的。 Here is a picture of what I am looking to achieve:
这是我要实现的目标的图片:
Here is my HTML of what I currently have: 这是我目前拥有的HTML:
<div data-role="fieldcontain" style="width:100%;">
<label for="name" style="background:yellow;color:black;width:5%;border-top-left-radius:10px;border-bottom-left-radius:10px;padding-right:0px;height:5%;">Text Input</label>
<input type="text" name="name" id="name" value="" style="border-top-left-radius:0px;border-bottom-left-radius:0px;width:93%"/>
</div>
But I keep getting this: 但我不断得到这个:
How do I get the input box to fill the screen ie have a width of 93% and have no top and bottom border radius? 如何获取输入框以填充屏幕,即宽度为93%,并且没有上下边界半径? The other problem is the Text Input labels height?
另一个问题是文本输入标签的高度? what doesn't
height:5%
work? height:5%
无效吗? Please help? 请帮忙?
You could set data-role="none"
on the input and then use regular CSS. 您可以在输入中设置
data-role="none"
,然后使用常规CSS。
<div id="specialCont">
<div>
<label for="pub_url">Text Input</label>
<input data-role="none" type="text" id="pub_url" name="pub_url" value="http://cssdeck.com" />
</div>
</div>
#specialCont {
background: #165FD1;
padding: 10px 4px;
width: 100%;
margin: 0 auto;
border: 1px solid #ccc;
}
#specialCont div {
overflow: hidden;
}
#specialCont label, #specialCont input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#specialCont label {
font-weight: normal;
background: linear-gradient(#FFFF00, #D8E404);
padding: 5px;
color: #333;
border: 1px solid #d4d4d4;
border-right: 0;
border-bottom-left-radius:2em;
border-top-left-radius: 2em;
line-height: 24px;
width: 20%;
float: left;
text-align: center;
cursor: pointer;
white-space:nowrap;
}
#specialCont input {
width: 80%;
padding: 8px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 2em;
border-top-right-radius: 2em;
line-height: 18px;
float: right;
margin-top: 0px;
box-shadow: inset 0px 2px 2px #ececec;
}
#specialCont input:focus {
outline: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.