I am trying to figure out how to use css to replace all my radio buttons the same way. Is it possible to use css to just make these radio buttons work no matter where the location of the input is? I dont want to to have to adjust for rows or anything. Just by grabbing the radio button and cssing it the way i have in the example below.
body {
background-color: white;
margin: 0;
padding: 0;
}
input[type='radio'] {
display: none;
}
.radio {
border: 1px solid #b3b4b4;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: block;
float: left;
height: 16px;
margin: 10px 10px 0 0;
padding: 10px;
position: relative;
width: 16px;
}
.row:hover .radio {
border: 2px solid #218996;
}
input[type='radio']:checked + .radio {
background-color: #218996;
border: 2px solid #218996;
}
input[type='radio']:checked + .radio::before {
content: "✓ ";
position: absolute;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size:
}
.row {
border-bottom: 1px solid #dcdcdc;
padding: 0 5px;
}
.row label {
display: inline-block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
}
.row > label:last-child {
padding: 12px 0;
width: calc(100% - 50px);
cursor: pointer;
}
<form name="titleTypes" id="titleTypes" method="post" action="process.cfm">
<div>
<!---Label is here for placement of error message--->
<label for="rgroup" class="error" style="display:none;">Please choose one.</label>
</div>
<div class='row'>
<input id="one" type="radio" name="rgroup" value="MV/titleTypeMV.cfm" />
<label for="one" class='radio' tabindex='1'></label>
<label for="one">MOTOR VEHICLE / TRAVEL TRAILER TITLE</label>
</div>
<div class='row'>
<input id="two" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
<label for="two" class='radio' tabindex='1'></label>
<label for="two">MOBILE HOME</label>
</div>
<div class='row'>
<input id="three" type="radio" name="rgroup" value="BOAT/boat.cfm" />
<label for="three" class='radio' tabindex='1'></label>
<label for="three">VESSEL</label>
</div>
<div class='row'>
<input id="four" type="radio" name="rgroup" value="DUPL/duplicate.cfm" />
<label for="four" class='radio' tabindex='1'></label>
<label for="four">DUPLICATE</label>
</div>
<div>
<button class="btn-u" type="submit" name="submit" id="submitBtn" class="submitBtn"><i></i>Next</button>
</div>
I want the input radio to be able to just work exactly as these radio buttons whether there on a table or any where just by calling the class. Is this possible to do?
Per our conversation in the comments, I slightly modified your CSS to work outside of the rows they were designed for. Mainly, I added a clear: both; to .radio to put each input on a new line, and added float: left; to both labels so they keep in line.
input[type='radio'] {
clear: both;
float: left;
width: 20px;
height: 10px;
opacity: 0;
}
.radio {
border: 1px solid #b3b4b4;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 16px;
margin: 0 10px 10px -20px;
padding: 10px;
position: relative;
width: 16px;
}
input[type='radio']:checked + .radio {
background-color: #218996;
border-color: #218996;
}
input[type='radio']:active + .radio,
input[type='radio']:focus + .radio {
border-color: lightblue;
}
input[type='radio']:checked + .radio::before {
content: "✓ ";
position: absolute;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
label {
float: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
<input id="one" type="radio" name="rgroup" tabindex='1' />
<label for="one" class='radio'></label>
<label for="one">Button 1</label>
<input id="two" type="radio" name="rgroup" tabindex='2' />
<label for="two" class='radio'></label>
<label for="two">Button 2</label>
When you say do it by classes, do you mean you want to be able to toggle from one state to another state without JS/jQ? Here's a demo I did in CSS, which shows how to hook into a radio or checkbox``:checked state.
Added OP's example and fixed the jerky motion when hovered over. This side-effect occurs when a state has more padding, margins, font-size, borders, etc. than it's counterpart. For example, take Snippet 2 as an example.
When hovered over the radio buttons and row would jerk around which is very irritating and distracting. In this case, there were several rulesets that had a border of 1px, while others had 2px. All you have to do is make sure all borders have the same width.
Added inset box-shadow to each radio to give them some depth on hover.
Added box-shadow to each row in order to define them a little.
Added animated borders to each row as well.
SNIPPET 1
html,
body {
box-sizing: border-box;
background: #111;
color: #DDD;
font: 400 16px/1.4'Verdana';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0 none hlsa(0%, 0, 0, 0);
outline: 0 none hlsa(0%, 0, 0, 0);
}
fieldset {
margin: 0 1em 1em 0;
padding: 8px;
border-radius: 9px;
border: 3px double #FF8;
width: 100%;
max-width: 19em;
}
legend {
font: small-caps 700 1.5rem/2"Palatino Linotype";
color: #FD1;
}
/* CheX */
#chex input.chkrad {
display: none;
}
#chex input.chkrad + label {
color: #DDD;
font-size: 16px;
}
#chex input.chkrad + label span {
display: inline-block;
width: 12px;
height: 12px;
margin: -1px 15px 0 0;
vertical-align: baseline;
cursor: pointer;
}
#chex input + label span {
background: #555;
line-height: 100%;
}
input.X:checked + label span {
padding: -3px 10px 3px;
}
input.X:checked + label span:before {
content: 'X';
color: #F00;
font-family: cursive;
font-style: oblique;
font-weight: 900;
font-size: 20px;
}
/* RadZ */
#radz input.chkrad {
display: none;
}
#radz input.chkrad + label {
color: #EEE;
font-size: 16px;
}
#radz input.chkrad + label span {
display: inline-block;
width: 18px;
height: 18px;
margin: -1px 15px 0 0;
vertical-align: baseline;
cursor: pointer;
}
#radz input + label span {
background: #555;
line-height: 100%;
}
input.A:checked + label span {
padding: -5px 15px 5px;
font-size: 16px;
}
input.A:checked + label span:before {
content: '👊';
color: #e3e;
font-family: cursive;
font-style: normal;
font-weight: 700;
font-size: 24px;
}
input.B:checked + label span {
padding: -5px 15px 5px;
font-size: 16px;
}
input.B:checked + label span:before {
content: '💋';
color: #f99;
font-family: cursive;
font-style: normal;
font-weight: 300;
font-size: 20px;
margin: 0 30px 0 0;
text-align: left;
}
input.C:checked + label span {
padding: -2px 15px 2px;
font-size: 16px;
}
input.C:checked + label span:before {
content: '🍸';
color: #3ef;
font-family: cursive;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: .75;
vertical-align: bottom;
margin-top: 5px;
}
input.D:checked + label span {
padding: -5px 15px 5px;
font-size: 16px;
}
input.D:checked + label span:before {
content: '💀';
color: #eee;
font-family: cursive;
font-style: normal;
font-weight: 100;
font-size: 20px;
line-height: .75;
}
input.fade + label span,
input.fade:checked + label span {
-webkit-transition: background 0.7s linear;
-moz-transition: background 0.7s linear;
transition: background 0.7s linear;
}
.red {
color: red;
}
<fieldset id="chex" name="chex">
<legend><span class="red">X</span> Marks the Checkbox</legend>
<input type='checkbox' name='chk3' id="chk3" class="chkrad X fade" value='x' />
<label for="chk3"><span></span>Red "X" mark</label>
</fieldset>
<fieldset id="radz" name="radz">
<legend>Shore Leave</legend>
<input type='radio' name='rad' id="rad1" class="chkrad A fade" value='1' />
<label for="rad1"><span></span>Brawl</label>
<br/>
<input type='radio' name='rad' id="rad2" class="chkrad B fade" value='2' />
<label for="rad2"><span></span>Women</label>
<br/>
<input type='radio' name='rad' id="rad3" class="chkrad C fade" value='3' />
<label for="rad3"><span></span>Drink</label>
<br/>
<input type='radio' name='rad' id="rad4" class="chkrad D fade" value='4' />
<label for="rad4"><span></span>All of the above, matey!</label>
<br/>
</fieldset>
SNIPPET 2
body {
background-color: white;
margin: 0;
padding: 0;
}
input[type='radio'] {
display: none;
}
.radio {
border: 2px solid #b3b4b4;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: table-cell;
float: left;
line-height: 100%;
margin: 10px 10px 0 0;
padding: 10px;
position: relative;
width: 16px;
}
.row:hover .radio {
border: 2px solid #218996;
box-shadow: inset 0 0 10px #218996;
}
input[type='radio']:checked + .radio {
background-color: #218996;
border: 2px solid #218996;
}
input[type='radio']:checked + .radio::before {
content: "✓ ";
position: absolute;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.row {
border-bottom: 2px solid #dcdcdc;
padding: 0 5px;
box-shadow: 0 0 10px rgba(0, 128, 192, .3);
}
.row label {
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-variant: small-caps;
font-weight: bold;
}
.row > label:last-child {
padding: 12px 0;
width: calc(100% - 50px);
cursor: pointer;
}
.btn-u {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-variant: small-caps;
font-weight: bold;
}
.row.bdr {
display: block;
position: relative;
padding-bottom: 1.5px;
}
.row.bdr::before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0s ease, background .5s ease;
}
.row.bdr::after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: rgba(51, 112, 44, .4);
transition: width .5s ease;
}
.row.bdr:hover::before {
width: 100%;
background: rgba(100, 177, 255, .4);
transition: width .5s ease;
}
.row.bdr:hover::after {
width: 100%;
background: transparent;
transition: all 0s ease;
}
<form name="titleTypes" id="titleTypes" method="post" action="process.cfm">
<div>
<!---Label is here for placement of error message--->
<label for="rgroup" class="error" style="display:none;">Please choose one.</label>
</div>
<div class='row bdr'>
<input id="one" type="radio" name="rgroup" value="MV/titleTypeMV.cfm" />
<label for="one" class='radio' tabindex='1'></label>
<label for="one">Motor Vehicle / Travel Trailer Title</label>
</div>
<div class='row bdr'>
<input id="two" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
<label for="two" class='radio' tabindex='1'></label>
<label for="two">Moble Home</label>
</div>
<div class='row bdr'>
<input id="three" type="radio" name="rgroup" value="BOAT/boat.cfm" />
<label for="three" class='radio' tabindex='1'></label>
<label for="three">Vessel</label>
</div>
<div class='row bdr'>
<input id="four" type="radio" name="rgroup" value="DUPL/duplicate.cfm" />
<label for="four" class='radio' tabindex='1'></label>
<label for="four">Duplicate</label>
</div>
<div>
<button class="btn-u" type="submit" name="submit" id="submitBtn" class="submitBtn"><i></i>Next</button>
</div>
I have a textbox and a validation message assigned to it. I am trying to put the validation message inline to the textbox, but it comes just under it. I have tried different options but none of them is working. Below is the code for the same:
HTML
<div class="col-lg-3 wrap">
<span>
<input class="mandatoryText vtooltips form-control textbox validationInput" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" name="tradeName" type="text">
<span class="vspan" style="display: inline-block;">Please enter Name</span>
</span>
</div>
CSS
input[type=text].vtooltips {
position: relative;
display: inline;
}
input[type=text].vtooltips + span.vspan {
/*position: absolute;*/
display:none;
font-size:12px;
font-family: Arial;
color:white;
border-radius:3px;
background: #DC000C;
width:50%;
border: 1px solid #6D6D6D;
line-height: 0px;
text-align: center;
/*visibility: hidden;*/
border-radius: 4px;
box-shadow: 2px 2px 0px #AFB1B1;
margin-left:5px;
line-height:15px;
}
.validationInput,
.validationInput:focus,
.validationInput:hover {
background-color: #FFFFE0!important;
border: 1px solid red!important;
height: 20px
}
.wrap span:first-child {
display: inline-block;
position: relative;
overflow: hidden;
width: 100%
}
.wrap span:first-child:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0 0 0 1px #FFFFE0
}
Here is a Demo for the same.
The desired output is:
Any help will be appreciated. Thanks.
The easiest way is to use CSS Flexbox. Make your <span> a flex container instead of inline-block, just like this:
span {
display: flex;
}
Have a look at the snippet below:
/* CSS used here will be applied after bootstrap.css */
input[type=text].vtooltips {
position: relative;
display: inline;
height: 20px;
}
.vspan {
/*position: absolute;*/
display:none;
font-size:12px;
font-family: Arial;
color:white;
border-radius:3px;
background: #DC000C;
width:50%;
height: 20px;
border: 1px solid #6D6D6D;
line-height: 0px;
text-align: center;
/*visibility: hidden;*/
border-radius: 4px;
box-shadow: 2px 2px 0px #AFB1B1;
margin-left:5px;
line-height:15px;
}
.validationInput,
.validationInput:focus,
.validationInput:hover {
background-color: #FFFFE0!important;
border: 1px solid red!important;
height: 20px
}
.wrap span:first-child {
display: flex;
position: relative;
overflow: hidden;
width: 100%
}
.wrap span:first-child .input-holder:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0 0 0 1px #FFFFE0
}
body {
margin: 30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-3 wrap">
<span>
<span class="input-holder">
<input type="text" class="mandatoryText vtooltips form-control textbox validationInput" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" name="tradeName"></span>
<span class="vspan" style="display: inline-block;">Please enter Name</span>
</span>
</div>
Hope this helps!
Please do below changes :
<div class="col-lg-3 wrap">
<span>
<input class="mandatoryText vtooltips form-control textbox validationInput" style="width: 70%; vertical-align: top; border-radius: 4px;" maxlength="100" name="tradeName" type="text">
<span class="vspan" style="display: inline;">Please enter Name</span>
</span>
</div>
please refer Demo from here :
Just add below css..
span.vspan{
margin-top: 5px;
display: flex;
}
.wrap span:first-child {
display: flex;
}
I have two input with one button are supposed in one div. I already use inline-block for these three elements. However the button is too low in Safari but ok in Chrome and Firefox. Anyone has any idea how to fix it?
<div class="simple-search">
<div class="keywords search-element">
<label for="simple_search_key">Key</label><br>
<input placeholder="e.g. " type="text" name="simple_search[keywords]" id="simple_search_keywords">
</div>
<div class="location search-element">
<label for="simple_search_Location">Location</label><br>
<input placeholder="e.g. " type="text" name="simple_search[location]" id="simple_search_location">
</div>
<div class="actions search-element primary-button">
<input type="submit" name="commit" value="Search">
</div>
.primary-button {
background-color: lime;
box-sizing: border-box;
border-radius: 4px;
}
.primary-button :hover {
background-color: lime;
cursor: pointer;
}
.primary-button input {
background-color: transparent;
color: white !important;
}
.primary-button.disabled {
background: #ecf7e2;
pointer-events: none;
cursor: default;
}
.simple-search {
margin: 0 auto;
text-align: center;
width: 80%;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 8px;
height: 80px;
padding: 2.2em 2.5em;
}
.search-element {
display: inline-block;
margin: 10px;
line-height: 2;
width: 30%;
margin-top: -5px;
}
.search-element label {
color: white;
float: left;
}
.search-element input {
border: none;
border-radius: 4px;
color: blue;
font-size: 1.5em;
height: 30px;
margin-top: .25em;
padding: .75em;
outline: none;
width: 96%;
}
.search-element.primary-button {
height: 60px;
}
.search-element.primary-button input {
height: 52px;
}
.results {
margin: 13px;
padding: 2.2em 10.5em;
}
.results .search-result {
margin: 10px;
margin-left: 0px;
margin-bottom: 30px;
}
.results .search-result .job-title {
font-size: 3ex;
margin-bottom: 10px;
}
.results .search-result .company-name, .results .search-result .location, .results .search-result .date {
display: inline-block;
margin-right: 10px;
}
.results .search-result .company-name {
font-family: monospace;
font-size: large;
}
This is what I have actually:
HTML
<label class="select">
<select name="email" id="email">
<option>aaaa</option>
<option>aaaa</option>
<option>aaaa</option>
<option>aaaa</option>
<option>aaaa</option>
<option>aaaa</option>
</select>
</label>
CSS
.cforms select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select {
position:relative;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
margin-top:40px;
}
.select:after {
content: "\f0dc";
font-family: FontAwesome;
color: #000;
padding:8px;
position:relative;
right:35px;
top:0px;
background:red;
z-index:-1;
width:10%;
line-height:10%;
}
Problem
Actually, no arrows appears near my select.
Could you please help me with this.
I searched on the web for examples, but I can't make it works.
Thanks.
maybe so
1) Font Awesome 4
.select {
border: 1px solid #ccc;
overflow: hidden;
height: 40px;
width: 240px;
position: relative;
display: block;
}
select{
height: 40px;
padding: 5px;
border: 0;
font-size: 16px;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select:after {
content:"\f0dc";
font-family: FontAwesome;
color: #000;
padding: 12px 8px;
position: absolute; right: 0; top: 0;
background: red;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<label class="select">
<select name="email" id="email">
<option>aaaa1</option>
<option>aaaa2</option>
<option>aaaa3</option>
<option>aaaa4</option>
<option>aaaa5</option>
<option>aaaa6</option>
</select>
</label>
2) Font Awesome 5
.select {
border: 1px solid #ccc;
overflow: hidden;
height: 40px;
width: 240px;
position: relative;
display: block;
}
select{
height: 40px;
padding: 5px;
border: 0;
font-size: 16px;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select:after {
content:"\f35a";
font-family: "Font Awesome 5 Free";
color: #fff;
padding: 12px 8px;
position: absolute; right: 0; top: 0;
background: red;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet">
<label class="select">
<select name="email" id="email">
<option>aaaa1</option>
<option>aaaa2</option>
<option>aaaa3</option>
<option>aaaa4</option>
<option>aaaa5</option>
<option>aaaa6</option>
</select>
</label>
I've customized this radio button and have trouble focusing the pointer inside the radio button .
<div class="radio">
<input id="left" type="radio" name="gender" value="left">
<label for="left">Left</label>
<input id="right" type="radio" name="gender" value="right">
<label for="right">Right</label>
</div>
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #ffffff;
border: 3px solid;
border-color: #bababa;
}
.radio label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #373c3e;
font-size: 60px;
text-align: center;
line-height: 16px;
}
Deputy example so that you can see the error.
Visit https://jsfiddle.net/drag/rbhzpvn3/1/
you can set just background color instead of > content: "\2022".
it means :
input[type=radio]:checked + label:before {
background-color: #373c3e;
}