I need to add an icon on image onclick.
I added a border and its is shown correctly onclick but not the font awesome icon
HTML
.couleursProduits input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.couleursProduits input[type=radio] + img {
cursor: pointer;
float: left;
outline: 1px solid #d0cdcd;
outline-offset: -2px;
}
.couleursProduits input[type=radio]:checked + img {
outline: 2px solid #ceb284;
outline-offset: -2px;
}
.couleursProduits input[type=radio]:checked + img:after {
content: "\f112";
font-family: "woodmart-font";
display: inline-block;
font-size: 16px;
line-height: 50px;
font-weight: 600;
}
<label class="couleursProduits">
<input type="radio" name="couleur" value="v1">
<img width="25%" src="https://picsum.photos/id/100/367/">
</label>
<label class="couleursProduits">
<input type="radio" name="couleur" value="v2">
<img width="25%" src="https://picsum.photos/id/101/367/">
</label>
<label class="couleursProduits">
<input type="radio" name="couleur" value="v3">
<img width="25%" src="https://picsum.photos/id/102/367/">
</label>
<label class="couleursProduits">
<input type="radio" name="couleur" value="v4">
<img width="25%" src="https://picsum.photos/id/103/367/">
</label>
Full code :
https://jsfiddle.net/rxvdm8ok/
Related
I use the following custom-radio want to change checked button background to blue
.custom-radio label {
color: #FFF;
border-radius: 20px;
display: inline-block;
width: 60px;
padding: 5px;
font-size: 10pt;
font-family: arial;
background-color: gray;
transition: all 0.3s;
}
.custom-radio input[type="radio"] {
display: none;
}
.custom-radio label>input[type="radio"]:checked {
background-color: blue !important;
}
<div class="radio-button-group ">
<div data-toggle="buttons" class="btn-group custom-radio">
<label class="btn border ">
<input type="radio" name="direction" id="direction-0" checked value="left">
<span>left</span>
</label>
<label class="btn border">
<input type="radio" name="direction" id="direction-1" value="top">
<span>right</span>
</label>
</div>
</div>
when custom-radio checked background color changed
active custom-radio want to change checked background to blue
You would need to move your styles to the span rather than have them on the label then you can use input[type="radio"]:checked + span to change the background colour
.custom-radio span {
color: #FFF;
border-radius: 20px;
display: inline-block;
width: 60px;
padding: 5px;
font-size: 10pt;
font-family: arial;
background-color: gray;
transition: all 0.3s;
}
.custom-radio input[type="radio"] {
display: none;
}
.custom-radio input[type="radio"]:checked+span {
background-color: blue;
}
<div class="radio-button-group ">
<div data-toggle="buttons" class="btn-group custom-radio">
<label class="btn border ">
<input type="radio" name="direction" id="direction-0" checked value="left">
<span>left</span>
</label>
<label class="btn border">
<input type="radio" name="direction" id="direction-1" value="top">
<span>right</span>
</label>
</div>
</div>
I'm using Bootstrap in my Angular application and all other styles are working like they should, but checkbox style doesn't. It just look like plain old checkbox.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">Please log in</h2>
<label for="inputEmail" class="sr-only">User name</label>
<input [(ngModel)]="loginUser.Username" type="username" name="username" id="inputEmail" class="form-control" placeholder="User name" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input [(ngModel)]="loginUser.Password" type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
<a *ngIf="register == false" (click)="registerState()">Register</a>
<div class="checkbox">
<label>
<input type="checkbox" [(ngModel)]="rememberMe" name="rememberme"> Remember me
</label>
</div>
<button *ngIf="register == false" (click)="login()" class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</form>
</div>
What it looks like:
What I want it to look like with Bootstrap style:
Since Bootstrap 3 doesn't have a style for checkboxes I found a custom made that goes really well with Bootstrap style.
Checkboxes
.checkbox label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.checkbox .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 15%;
}
.checkbox label input[type="checkbox"] {
display: none;
}
.checkbox label input[type="checkbox"]+.cr>.cr-icon {
opacity: 0;
}
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled+.cr {
opacity: .5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Default checkbox -->
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option one
</label>
</div>
<!-- Checked checkbox -->
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option two is checked by default
</label>
</div>
<!-- Disabled checkbox -->
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option three is disabled
</label>
</div>
Radio
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 13%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
display: none;
}
.checkbox label input[type="checkbox"]+.cr>.cr-icon,
.radio label input[type="radio"]+.cr>.cr-icon {
opacity: 0;
}
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
.radio label input[type="radio"]:checked+.cr>.cr-icon {
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled+.cr,
.radio label input[type="radio"]:disabled+.cr {
opacity: .5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<!-- Default radio -->
<div class="radio">
<label>
<input type="radio" name="o3" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option one
</label>
</div>
<!-- Checked radio -->
<div class="radio">
<label>
<input type="radio" name="o3" value="" checked>
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option two is checked by default
</label>
</div>
<!-- Disabled radio -->
<div class="radio disabled">
<label>
<input type="radio" name="o3" value="" disabled>
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option three is disabled
</label>
</div>
Custom icons
You can choose your own icon between the ones from Bootstrap or Font Awesome by changing [icon name] with your icon.
<span class="cr"><i class="cr-icon [icon name]"></i>
For example:
glyphicon glyphicon-remove for Bootstrap, or
fa fa-bullseye for Font Awesome
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 15%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
display: none;
}
.checkbox label input[type="checkbox"]+.cr>.cr-icon,
.radio label input[type="radio"]+.cr>.cr-icon {
opacity: 0;
}
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
.radio label input[type="radio"]:checked+.cr>.cr-icon {
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled+.cr,
.radio label input[type="radio"]:disabled+.cr {
opacity: .5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon glyphicon glyphicon-remove"></i></span>
Bootstrap - Custom icon checkbox
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o3" value="" checked>
<span class="cr"><i class="cr-icon fa fa-bullseye"></i></span>
Font Awesome - Custom icon radio checked by default
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o3" value="">
<span class="cr"><i class="cr-icon fa fa-bullseye"></i></span>
Font Awesome - Custom icon radio
</label>
</div>
You have to use Bootstrap version 4 with the custom-* classes to get this style:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- example code of the bootstrap website -->
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
<!-- your code with the custom classes of version 4 -->
<div class="checkbox">
<label class="custom-control custom-checkbox">
<input type="checkbox" [(ngModel)]="rememberMe" name="rememberme" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Remember me</span>
</label>
</div>
Documentation: https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios-1
Custom checkbox style on Bootstrap version 3?
Bootstrap version 3 doesn't have custom checkbox styles, but you can use your own. In this case: How to style a checkbox using CSS?
These custom styles are only available since version 4.
/* The customcheck */
.customcheck {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.customcheck input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 5px;
}
/* On mouse-over, add a grey background color */
.customcheck:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.customcheck input:checked ~ .checkmark {
background-color: #02cf32;
border-radius: 5px;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.customcheck input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.customcheck .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="container">
<h1>Custom Checkboxes</h1></br>
<label class="customcheck">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="customcheck">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="customcheck">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="customcheck">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
Here you have an example styling checkboxes and radios using Font Awesome 5 free[
/*General style*/
.custom-checkbox label, .custom-radio label {
position: relative;
cursor: pointer;
color: #666;
font-size: 30px;
}
.custom-checkbox input[type="checkbox"] ,.custom-radio input[type="radio"] {
position: absolute;
right: 9000px;
}
/*Custom checkboxes style*/
.custom-checkbox input[type="checkbox"]+.label-text:before {
content: "\f0c8";
font-family: "Font Awesome 5 Pro";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
.custom-checkbox input[type="checkbox"]:checked+.label-text:before {
content: "\f14a";
color: #2980b9;
animation: effect 250ms ease-in;
}
.custom-checkbox input[type="checkbox"]:disabled+.label-text {
color: #aaa;
}
.custom-checkbox input[type="checkbox"]:disabled+.label-text:before {
content: "\f0c8";
color: #ccc;
}
/*Custom checkboxes style*/
.custom-radio input[type="radio"]+.label-text:before {
content: "\f111";
font-family: "Font Awesome 5 Pro";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
.custom-radio input[type="radio"]:checked+.label-text:before {
content: "\f192";
color: #8e44ad;
animation: effect 250ms ease-in;
}
.custom-radio input[type="radio"]:disabled+.label-text {
color: #aaa;
}
.custom-radio input[type="radio"]:disabled+.label-text:before {
content: "\f111";
color: #ccc;
}
#keyframes effect {
0% {
transform: scale(0);
}
25% {
transform: scale(1.3);
}
75% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
<script src="https://kit.fontawesome.com/2a10ab39d6.js"></script>
<div class="col-md-4">
<form>
<h2>1. Customs Checkboxes</h2>
<div class="custom-checkbox">
<div class="form-check">
<label>
<input type="checkbox" name="check" checked> <span class="label-text">Option 01</span>
</label>
</div>
<div class="form-check">
<label>
<input type="checkbox" name="check"> <span class="label-text">Option 02</span>
</label>
</div>
<div class="form-check">
<label>
<input type="checkbox" name="check"> <span class="label-text">Option 03</span>
</label>
</div>
<div class="form-check">
<label>
<input type="checkbox" name="check" disabled> <span class="label-text">Option 04</span>
</label>
</div>
</div>
</form>
</div>
<div class="col-md-4">
<form>
<h2>2. Customs Radios</h2>
<div class="custom-radio">
<div class="form-check">
<label>
<input type="radio" name="radio" checked> <span class="label-text">Option 01</span>
</label>
</div>
<div class="form-check">
<label>
<input type="radio" name="radio"> <span class="label-text">Option 02</span>
</label>
</div>
<div class="form-check">
<label>
<input type="radio" name="radio"> <span class="label-text">Option 03</span>
</label>
</div>
<div class="form-check">
<label>
<input type="radio" name="radio" disabled> <span class="label-text">Option 04</span>
</label>
</div>
</div>
</form>
</div>
As others have said, the style you're after is actually just the Mac OS checkbox style, so it will look radically different on other devices.
In fact both screenshots you linked show what checkboxes look like on Mac OS in Chrome, the grey one is shown at non-100% zoom levels.
For bootstrap 5, if the switch/checkbox is not styled, add appearance in your css file.
For example:
.form-switch, .form-check {
.form-check-input {
-webkit-appearance: none;
-moz-appearance: none;
}
}
CSS only, I prefer not to add any additional JS. The 2nd radio button is not being "checked" when clicked.
Here's fiddle already created.
HTML:
<div class="account-container">
<div class="form-group">
<div class="control-container clearfix">
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Mujer" checked />
<label>Mujer</label>
</div>
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Hombre" />
<label>Hombre</label>
</div>
</div>
</div>
</div>
CSS:
.account-container .radio {
height: 100%;
margin: 0;
}
.account-container .radio label {
position: relative;
line-height: 40px;
cursor: pointer;
padding-left: 30px;
}
.account-container .radio label:before {
content: " ";
display: inline-block;
width: 22px;
height: 22px;
position: absolute;
left: 0;
top: 9px;
border: 1px solid #1fb5e1;
background-color: #fff;
border-radius: 50%;
}
.account-container .radio input[type="radio"]:checked + label:after {
background-color: #1fb5e1;
width: 14px;
height: 14px;
border-radius: 50%;
position: absolute;
content: " ";
left: 5px;
top: 14px;
}
<input type="radio" id="id_of_radio">
<label for="id_of_radio">
The issue is the position of your radio items, since they are not visible, you cannot click on it.
You should use the capability of the label, when you click on it, the bounded element is selected.
http://jsfiddle.net/fvzegu6o/1/
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Mujer" id="mujer" checked />
<label for="mujer">Mujer</label>
</div>
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Hombre" id="hombre" />
<label for="hombre">Hombre </label>
</div>
I´m trying to include a Font Awesome inside my input in left side but I´m not having sucess. I never used awesome fonts to this purporse. Anyone there knows how to include the font inside the input? Thanks!
The font Im trying to include in left side of my input:
<i class="fa fa-user"></i>
My html:
<form action="" method="post">
<input type="text"class="inputs" placeholder="e-mail" />
<br />
<input type="password" class="inputs"placeholder="Password" />
</form>
My css:
inputs:-webkit-input-placeholder {
color: #b5b5b5;
}
inputs-moz-placeholder {
color: #b5b5b5;
}
.inputs {
background: #f5f5f5;
font-family:"bariol_regularregular", Palatino, serif;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width:180px;
margin-bottom: 10px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
height:20px;
}
.inputs:focus {
background: #fff;
box-shadow: 0px 0px 0px 2px #96842E;
outline: none;
}
This can be achieved with some absolute positioninig. There are two different ways I can think of doing this so I will show you both. Fiddle with both examples here
Method 1
HTML
<label id="email-label">
<input type="text" id="email" placeholder="email here" />
</label>
CSS
#email {
padding-left: 20px;
}
#email-label {
position: relative;
}
#email-label:before {
color: #666;
content:"\f007";
font-family: FontAwesome;
position: absolute;
top: 2px;
left: 5px;
}
Method 2
HTML
<label id="email-label2">
<i class="fa fa-rocket"></i>
<input type="text"id="email2" placeholder="email here" />
</label>
CSS
#email-label2 {
position: relative;
}
#email-label2 .fa-rocket {
color: #666;
top: 2px;
left: 5px;
position: absolute;
}
#email2 {
padding-left: 20px;
}
I purpose this :
HTML
<i class="inside fa fa-user"></i>
<input type="text" class="inp" placeholder="Your account" />
CSS
.inside {
position:absolute;
text-indent:5px;
margin-top:2px;
color:green;
}
.inp {
text-indent:20px;
}
https://jsfiddle.net/ga6j5345/1/
I'm attempting to float two divs next to each other below a headline. I have tried inline-block, but the only luck I have had is making the container div display: table, and child divs as display: table-cell. I am able to align the two divs using this method, but now I have a large margin or extra padding above the "table cells." Any solution to remove extra margin/padding between the headline and child divs?
If there is a solution to not using display: table and display: table-cell, I would greatly appreciate as I only defaulted to this, because I was unable to get the floats or inline-block to vertically align with each other.
http://jsfiddle.net/jasonniebauer/GRS2k/
HTML
<div id="owner_headline">
<h3>
Owner/Officer Information
</h3>
<p>
Second Owner/Officer (optional)
</p>
</div>
<div id="owner_info">
<div id="owner_info1">
<label for="owner_name">
Name
</label>
<input type="text" id="owner_name" placeholder="Name"/>
<label for="home_address">
Home Address
</label>
<input type="text" id="home_address" placeholder="Address"/>
<label for="owner_city">
City
</label>
<input type="text" id="owner_city" placeholder="City"/>
<label for="owner_state">
State
</label>
<input type="text" id="owner_state" placeholder="State"/>
<label for="owner_zip">
Zip
</label>
<input type="text" id="owner_zip" placeholder="Zip"/>
<label for="owner_phone">
Phone
</label>
<input type="text" id="owner_phone" placeholder="Phone"/>
<label for="ownership">
Ownership
</label>
<input type="text" id="ownership" placeholder="Percentage"/>
<label>
%
</label>
<label for="ssn">
SSN
</label>
<input type="text" id="ssn" placeholder="XXX-XX-XXXX">
</div>
<div id="owner_info2">
<label for="owner_name2">
Name
</label>
<input type="text" id="owner_name2" placeholder="Name"/>
<label for="home_address2">
Home Address
</label>
<input type="text" id="home_address2" placeholder="Address"/>
<label for="owner_city2">
City
</label>
<input type="text" id="owner_city2" placeholder="City"/>
<label for="owner_state2">
State
</label>
<input type="text" id="owner_state2" placeholder="State"/>
<label for="owner_zip2">
Zip
</label>
<input type="text" id="owner_zip2" placeholder="Zip"/>
<label for="owner_phone2">
Phone
</label>
<input type="text" id="owner_phone2" placeholder="Phone"/>
<label for="ownership2">
Ownership
</label>
<input type="text" id="ownership2" placeholder="Percentage"/>
<label>
%
</label>
<label for="ssn">
SSN
</label>
<input type="text" id="ssn2" placeholder="XXX-XX-XXXX">
</div>
</div>
Css
#owner_headline {
background-color: #000B84;
}
#owner_headline h3 {
background-color: #000B84;
padding-left: 7rem;
padding-top: .5rem;
padding-bottom: .5rem;
font-family: "Bank Gothic", serif;
font-size: 24px;
display: inline-block;
color: #FFFFFF;
}
#owner_headline p {
font-family: Arial, sans-serif;
font-style: italic;
font-size: 17px;
font-weight: bold;
display: inline-block;
padding-top: 0;
padding-bottom: 0;
float: right;
padding-right: .1rem;
padding-top: .25rem;
margin-right: 1rem;
color: #FFFFFF;
}
#owner_info {
width: 912px;
display: table;
}
#owner_info1 {
width: 446px;
display: inline-block;
border: 1px solid black;
float: left;
display: table-cell;
}
#owner_info2 {
display: table-cell;
}
#owner_info1 label,
#owner_info2 label {
font-size: 14px;
}
#owner_info1 input,
#owner_info2 input {
display: inline-block;
margin-bottom: 1rem;
}
#owner_info2 {
margin-left: 1rem;
width: 446px;
display: inline-block;
border: 1px solid black;
float: left;
}
#owner_info1 input:nth-of-type(1),
#owner_info2 input:nth-of-type(1) {
width: 400px;
}
#owner_info1 input:nth-of-type(2),
#owner_info2 input:nth-of-type(2) {
width: 344px;
}
#owner_info1 input:nth-of-type(3),
#owner_info2 input:nth-of-type(3) {
width: 169px;
}
#owner_info1 input:nth-of-type(4),
#owner_info2 input:nth-of-type(4) {
width: 184px;
}
#owner_info1 label:nth-of-type(4),
#owner_info1 label:nth-of-type(6),
#owner_info1 label:nth-of-type(9),
#owner_info2 label:nth-of-type(4),
#owner_info2 label:nth-of-type(6),
#owner_info2 label:nth-of-type(9) {
margin-left: 1rem;
}
#owner_info1 input:nth-of-type(5),
#owner_info2 input:nth-of-type(5) {
width: 173px;
}
#owner_info1 input:nth-of-type(6),
#owner_info2 input:nth-of-type(6) {
width: 176px;
}
#owner_info1 input:nth-of-type(7),
#owner_info2 input:nth-of-type(7) {
width: 108px;
}
#owner_info1 input:nth-of-type(8),
#owner_info2 input:nth-of-type(8) {
width: 190px;
}
try this:
Html:
<div id="owner_headline">
<div>
<h3> Owner/Officer Information </h3>
<p>
Second Owner/Officer (optional)
</p>
</div>
<span style="clear:both;"></span>
<div id="owner_info1">
<label for="owner_name"> Name </label>
<input type="text" id="owner_name" placeholder="Name"/>
<label for="home_address"> Home Address </label>
<input type="text" id="home_address" placeholder="Address"/>
<label for="owner_city"> City </label>
<input type="text" id="owner_city" placeholder="City"/>
<label for="owner_state"> State </label>
<input type="text" id="owner_state" placeholder="State"/>
<label for="owner_zip"> Zip </label>
<input type="text" id="owner_zip" placeholder="Zip"/>
<label for="owner_phone"> Phone </label>
<input type="text" id="owner_phone" placeholder="Phone"/>
<label for="ownership"> Ownership </label>
<input type="text" id="ownership" placeholder="Percentage"/>
<label> % </label>
<label for="ssn"> SSN </label>
<input type="text" id="ssn" placeholder="XXX-XX-XXXX">
</div>
<span style="clear:both;"></span>
<div id="owner_info2">
<label for="owner_name2"> Name </label>
<input type="text" id="owner_name2" placeholder="Name"/>
<label for="home_address2"> Home Address </label>
<input type="text" id="home_address2" placeholder="Address"/>
<label for="owner_city2"> City </label>
<input type="text" id="owner_city2" placeholder="City"/>
<label for="owner_state2"> State </label>
<input type="text" id="owner_state2" placeholder="State"/>
<label for="owner_zip2"> Zip </label>
<input type="text" id="owner_zip2" placeholder="Zip"/>
<label for="owner_phone2"> Phone </label>
<input type="text" id="owner_phone2" placeholder="Phone"/>
<label for="ownership2"> Ownership </label>
<input type="text" id="ownership2" placeholder="Percentage"/>
<label> % </label>
<label for="ssn"> SSN </label>
<input type="text" id="ssn2" placeholder="XXX-XX-XXXX">
</div>
</div>
This is css:
body {
width: 912px;
}
#owner_headline {
background-color: #000B84;
}
#owner_headline h3 {
margin: 0 80px;
font-family: "Bank Gothic", serif;
font-size: 24px;
display: inline-block;
color: #FFFFFF;
}
#owner_headline p {
margin: 0 65px;
font-family: "Bank Gothic", serif;
font-size: 24px;
font-weight: bold;
display: inline-block;
padding-top: 0;
padding-bottom: 0;
color: #FFFFFF;
}
#owner_info {
width: 912px;
display: table;
}
#owner_info1 {
width: 446px;
display: inline-block;
border: 1px solid black;
float: left;
display: table-cell;
}
#owner_info2 {
display: table-cell;
}
#owner_info1 label, #owner_info2 label {
font-size: 14px;
}
#owner_info1 input, #owner_info2 input {
display: inline-block;
margin-bottom: 1rem;
}
#owner_info2 {
margin-left: 1rem;
width: 446px;
display: inline-block;
border: 1px solid black;
float: left;
}
#owner_info1 input:nth-of-type(1), #owner_info2 input:nth-of-type(1) {
width: 400px;
}
#owner_info1 input:nth-of-type(2), #owner_info2 input:nth-of-type(2) {
width: 344px;
}
#owner_info1 input:nth-of-type(3), #owner_info2 input:nth-of-type(3) {
width: 169px;
}
#owner_info1 input:nth-of-type(4), #owner_info2 input:nth-of-type(4) {
width: 184px;
}
#owner_info1 label:nth-of-type(4), #owner_info1 label:nth-of-type(6), #owner_info1 label:nth-of-type(9), #owner_info2 label:nth-of-type(4), #owner_info2 label:nth-of-type(6), #owner_info2 label:nth-of-type(9) {
margin-left: 1rem;
}
#owner_info1 input:nth-of-type(5), #owner_info2 input:nth-of-type(5) {
width: 173px;
}
#owner_info1 input:nth-of-type(6), #owner_info2 input:nth-of-type(6) {
width: 176px;
}
#owner_info1 input:nth-of-type(7), #owner_info2 input:nth-of-type(7) {
width: 108px;
}
#owner_info1 input:nth-of-type(8), #owner_info2 input:nth-of-type(8) {
width: 190px;
}