I saw lot of answers with regards to styling a checkbox so that you get a checkbox followed by its label. But was not able to find an answer for my issue. I am trying to render the same behavior in NetSuite's online customer form which interestingly put the the checkbox first and then the label at the bottom. Can anyone help in this? The snippet of the code is as follows:
<HTML>
<Head>
<title>OnlineLeadForm</title>
<base href="https://forms.netsuite.com/">
<script type=text/javascript>
function kVoid() { return; }
function kenshoo_conv(type,value,orderId,promoCode,valueCurrency) {
var hostProtocol = (("https:" == document.location.protocol) ? "https" : "http");
var url = hostProtocol+"://5039.xg4ken.com/media/redir.php?track=1&id=4a9f7db0-00a0-4b70-91b3-dddf4a74da2e&type="+ type + "&val=" + value + "&orderId=" + orderId + "&valueCurrency=" + valueCurrency + "&promo-Code=" + promoCode + "&ref=" + document.referrer;
var a = new Image(1,1);
a.src = url;
a.onload = function() { kVoid(); }
}
</script>
<style type="text/css">
iframe {
border:none;
}
body {
background: #ffffff;
font-family: Arial, Helvetica, Sans;
font-size: 13px;
padding: 0;
}
form {
margin-top: 50px;
min-height: 400px;
width: 420px;
max-width: 420px;
border:none;
}
input, select, textarea {
font-family: 'Lucida Grande';
font-size: 12px !important;
border: #DED9D3 1px solid;
width: 100%;
padding: 5px 7px;
color: #685C54 !important;
}
textarea {
height: 100px;
resize: none;
}
#gtk_details {
padding: 10px;
border: 1px solid silver;
background: white;
margin: 0 0 10px 0;
}
#gtk_details p {
color: #685C54;
font-size: 10px;
line-height: 14px;
margin: 0 0 12px 0;
white-space: normal;
}
label {
display: block;
cursor: pointer;
font-family: Arial, Helvetica, Sans;
font-size: 13px;
font-weight: normal;
color: #685C54;
margin-bottom: 0.2em;
}
td.smalltextnolink {
width: 120px;
height: 40px;
padding-right: 10px;
}
td {
padding-bottom: 10px;
}
fieldset {
margin: 0;
border: 0;
padding: 0;
}
legend {
background: #B79F8C;
padding: 5px 15px;
color: #fff;
font-weight: lighter;
}
form p {
margin: 0.5em 0;
}
p.splitInput {
float: left;
width: 202px;
}
p.splitInput.margin {
margin-right: 15px;
}
p.splitInput#cityBlock {
width: 200px;
}
p.splitInput#stateBlock {
width: 75px;
}
p.splitInput#zipBlock {
width: 115px;
}
p.splitInput#OptInNewLeadsBlock {
width: 400px;
float: left;
}
p.splitInput input, p.splitInput select {
width: 100%; /* Inputs should be 100% of the parent p tag's width */
}
.container {
display: inline-block;
white-space: nowrap;
float: left;
}
.clear {
clear: both;
height: 0;
}
input#submit_btn {
width: auto;
float: left;
border: 0;
padding: 0;
margin: 0;
}
</style>
</Head>
<body>
<NLFORM>
<!-- Hidden input -->
<nlcategory>
<!-- Hidden input -->
<fieldset>
<p>
<label for="companyname">Business name <img alt="Required" src="https://forms.netsuite.com/images/chiles/pageTitle/required.png"></label>
<nlcompanyname>
</nlcompanyname></p>
<p class="splitInput margin">
<label for="firstname">First name <img alt="Required" src="https://forms.netsuite.com/images/chiles/pageTitle/required.png"></label>
<nlfirstname>
</nlfirstname></p>
<p class="splitInput">
<label for="lastname">Last name <img alt="Required" src="https://forms.netsuite.com/images/chiles/pageTitle/required.png"></label>
<nllastname>
</nllastname></p>
<div class="clear"></div>
<p class="splitInput margin">
<label for="email">Email<img alt="Required" src="https://forms.netsuite.com/images/chiles/pageTitle/required.png"></label>
<nlemail>
</nlemail></p>
<p class="splitInput">
<label for="website" value="test">Website</label>
<nlurl>
</nlurl></p>
</fieldset>
<fieldset>
<p class="splitInput margin">
<label for="phone">Phone<img alt="Required" src="https://forms.netsuite.com/images/chiles/pageTitle/required.png"></label>
<nlphone>
</nlphone></p>
<div class="clear"></div>
<p class="splitInput margin" id="cityBlock">
<label for="city">City</label>
<nlcity>
</nlcity></p>
<p class="splitInput margin" id="stateBlock">
<label for="state">State</label>
<nlstate>
</nlstate></p>
<p class="splitInput" id="zipBlock">
<label for="zipcode">Zip</label>
<nlzipcode>
</nlzipcode></p>
<div class="clear"></div>
<p class="splitInput margin">
<label for="country">Country<img alt="Required" src="https://forms.netsuite.com/images/chiles/pageTitle/required.png"></label>
<nlcountry>
</nlcountry>
</p>
<div class="clear"></div>
<div class="container">
<p>
<nlcustentity89>
</nlcustentity89>
<label for="OptInNewLeads">Be the first to hear about new arrivals, exclusive offers and more.</label>
</p>
</div>
<p class="splitInput">
<input id="submit_btn" onclick="javascript:kenshoo_conv('wholesalelead','0','0','0','USD');" alt="Submit" src="https://www.manduka.com/media/site-media/wholesale/130118_btn_sbmt_V2.jpg" type="image">
</p>
</fieldset>
</nlcategory>
</form>
</Body>
</HTML>
where custentity89 is the internal id of our custom checkbox entity field in our NetSuite account. Attached is a screenshot of how NetSuite renders the checkbox currently in our online customer form. I am just trying to display the checkbox on the left of its label text on the same line like a regular checkbox field.
Update 1: After changing the label to inline-block like Quiver mentioned in his comment, my form now looks as below: Online customer form
It's hard to know what exactly the problem is without all of the code. But try change your label from
display: blocktodisplay: inline-block.