[英]Aligning/styling checkboxes with rest of form
I'm trying to align and style a set of checkboxes with the rest of my form, but I don't have much experience styling forms. 我正在尝试使用我的表单的其余部分对齐和设置一组复选框,但我没有太多经验样式表单。 I'm struggling to reference the legend, labels, and input boxes separately.
我正在努力分别引用图例,标签和输入框。 I've seen checkboxes structured with different mark-up, so I'm not sure if there's a better way to accomplish this.
我看过用不同标记构建的复选框,所以我不确定是否有更好的方法来实现这一点。
Intended layout/style: 预期的布局/风格:
HTML: HTML:
<div id="appraisals-form" class="contact-form">
<form role="form" method="post" action="contact-form.php">
<label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
<label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
<label for="email"><span>Phone</span><input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /></label>
<label for="art-type" class="wrap"><span class="wrap-lg">Type of Artwork</span><span class="wrap-sm">(i.e. sculpture, painting...)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork."></label>
<label for="artist" class="wrap"><span class="wrap-lg">Artist Name</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's artist."></label>
<label for="title" class="wrap"><span class="wrap-lg">Title of Piece</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's title."></label>
<label for="measurements"><span>Measurements</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's measurements." /></label>
<label for="date" class="wrap"><span class="wrap-lg">Date / Age</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's date / age."></label>
<label for="condition"><span>Condition</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your item's condition."></textarea></label>
<label for="doc" class="wrap"><span class="wrap-lg">Documentation</span><span class="wrap-sm">(certificates, receipts, previous appraisals, etc.)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's documentation."></textarea></label>
<label for="writing" class="wrap"><span class="wrap-lg">Writing / Labels</span><span class="wrap-sm">(text or any writing or labels on the art)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's text / labels."></textarea></label>
<label for="purchase-hist" class="wrap"><span class="wrap-lg">Purchase History</span><span class="wrap-sm">(date, cost, location, etc.)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's purchase history."></textarea></label>
<label for="additional" class="wrap"><span class="wrap-lg">Additional Details</span><span class="wrap-sm">(anything else you know)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's additional details."></textarea></label>
<fieldset>
<legend>Type of Appraisal</legend>
<input type="checkbox" name="app-type" value="Insurance" />Insurance
<input type="checkbox" name="app-type" value="Donation" />Donation
<input type="checkbox" name="app-type" value="General Estate Planning" />General Estate Planning
</fieldset>
<div class="centred-button"><input type="submit" value="" class="submit-button" /></div>
</form>
</div>
CSS: CSS:
.contact-form {
margin: 0 auto;
max-width: 600px;
position: relative;
top: 50%;
transform: translateY(-50%);
font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
font-size: 20px;
}
.contact-form label {
display: block;
margin: 0px 0px 15px 0px;
text-transform: uppercase; /* New */
}
.contact-form label > span {
padding-top: 8px;
}
.contact-form label > span, #recaptcha::before {
width: 100px;
text-align: right;
float: left;
padding-right: 20px;
content: "";
}
.contact-form input, .contact-form textarea, .contact-form fieldset {
margin-bottom: 15px;
padding: 10px;
border: none;
}
.contact-form input.input-field {
width: 70%;
height: 20px;
font-size: 18px;
}
.contact-form .textarea-field {
height: 250px;
margin-bottom: 11px;
}
.contact-form .textarea-field, .g-recaptcha {
width: 70%;
font-size: 18px;
display: inline-block;
}
.contact-form fieldset { /* New */
font-size: 16px;
}
.contact-form legend { /* New */
width: 150px;
text-align: right;
float: left;
padding-right: 20px;
content: "";
text-transform: uppercase;
}
.contact-form fieldset input { /* New */
margin-right: 10px;
text-align: left;
}
.g-recaptcha {
height: 78px !important;
}
#recaptcha {
display: block;
margin: 0px 0px 24px 0px;
}
textarea {
resize: none;
}
textarea:focus, input:focus {
outline: 0;
}
input.submit-button {
background-image: url("../img/submit-button.jpg");
width: 225px;
height: 60px;
border: none;
}
Fiddle: http://jsfiddle.net/trqgos4q/ . 小提琴: http : //jsfiddle.net/trqgos4q/ 。
Any help would be really appreciated! 任何帮助将非常感激!
It looks like you're using a fixed layout, so I added a margin-left to your first input, and added box-sizing: border-box
to your appraisal label so it no longer pushes the input labels to the right. 看起来你正在使用一个固定的布局,所以我在你的第一个输入中添加了一个margin-left,并在你的评估标签上添加了
box-sizing: border-box
,这样它就不再将输入标签推向右边。
These changes make it so the checkboxes align like you were looking for. 这些更改使复选框按照您要查找的方式对齐。
Here is the relevant CSS: 这是相关的CSS:
#appraisalTypeWrap > legend {
box-sizing: border-box;
}
#appraisalTypeWrap > input:first-of-type {
margin-left: 10px;
}
I gave the "Type of Appraisal" fieldset the appraisalTypeWrap
id, so that's what this CSS targets. 我给了“评估类型”字段集
appraisalTypeWrap
id,这就是这个CSS的目标。
Working JSFiddle: http://jsfiddle.net/trqgos4q/2/ 工作JSFiddle: http : //jsfiddle.net/trqgos4q/2/
Best i can do for you right now.. but you should rewrite your html ;) (also i didn't change any html code..) 我现在可以为你做的最好..但你应该重写你的HTML;)(我也没有改变任何HTML代码..)
#appraisals-form { width: 650px; } label { display: block; } label > span:first-child { display: block; float: left; width: 150px } label > span:nth-child(2) { display: block; float: right; } label textarea, label input { width: 180px; }
<div id="appraisals-form" class="contact-form"> <form role="form" method="post" action="contact-form.php"> <label for="name"><span>Name</span> <input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /> </label> <label for="email"><span>Email</span> <input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /> </label> <label for="email"><span>Phone</span> <input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /> </label> <label for="art-type" class="wrap"><span class="wrap-lg">Type of Artwork</span><span class="wrap-sm">(ie sculpture, painting...)</span> <input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork."> </label> <label for="artist" class="wrap"><span class="wrap-lg">Artist Name</span><span class="wrap-sm">(if known)</span> <input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's artist."> </label> <label for="title" class="wrap"><span class="wrap-lg">Title of Piece</span><span class="wrap-sm">(if known)</span> <input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's title."> </label> <label for="measurements"><span>Measurements</span> <input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's measurements." /> </label> <label for="date" class="wrap"><span class="wrap-lg">Date / Age</span><span class="wrap-sm">(if known)</span> <input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's date / age."> </label> <label for="condition"><span>Condition</span> <textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your item's condition."></textarea> </label> <label for="doc" class="wrap"><span class="wrap-lg">Documentation</span><span class="wrap-sm">(certificates, receipts, previous appraisals, etc.)</span> <textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's documentation."></textarea> </label> <label for="writing" class="wrap"><span class="wrap-lg">Writing / Labels</span><span class="wrap-sm">(text or any writing or labels on the art)</span> <textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's text / labels."></textarea> </label> <label for="purchase-hist" class="wrap"><span class="wrap-lg">Purchase History</span><span class="wrap-sm">(date, cost, location, etc.)</span> <textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's purchase history."></textarea> </label> <label for="additional" class="wrap"><span class="wrap-lg">Additional Details</span><span class="wrap-sm">(anything else you know)</span> <textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's additional details."></textarea> </label> <fieldset> <legend>Type of Appraisal</legend> <input type="checkbox" name="app-type" value="Insurance" />Insurance <input type="checkbox" name="app-type" value="Donation" />Donation <input type="checkbox" name="app-type" value="General Estate Planning" />General Estate Planning </fieldset> <div class="centred-button"> <input type="submit" value="" class="submit-button" /> </div> </form> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.