I have some html that is returned when I submit a form that I can't change.
<div>
<label>Enter your email</div>
<input type="text" name="email" value="bademail#" />
<div class="error">That email is not valid</div>
<div>
I'd like to style it so that the div.error shows an icon which when I hover over shows the text as a tooltip.
Can this be done using css alone?
You can use a hover on a div, to display the child span:
.error {
position: relative;
}
.error > span {
display: none;
}
.error:hover > span {
display: block;
position: absolute;
left: 20px;
bottom: 100%;
border: 1px solid red;
border-radius: 3px;
padding: 5px;
background: rgba(0, 0, 0, 0.7);
color: white;
}
<div>
<label>Enter your email</label>
<input type="text" name="email" value="bademail#" />
<div class="error">icon<span>That email is not valid</span></div>
</div>
You can also use a pseudo elements instead of the span:
.error {
position: relative;
}
.error:hover::before {
display: block;
position: absolute;
left: 20px;
bottom: 100%;
border: 1px solid red;
border-radius: 3px;
padding: 5px;
background: rgba(0, 0, 0, 0.7);
color: white;
content: attr(data-tooltip);
}
<div>
<label>Enter your email</label>
<input type="text" name="email" value="bademail#" />
<div class="error" data-tooltip="That email is not valid">icon</div>
</div>
Related
I want to create a cool animation that when the user clicks on the email input or the password the label of the input will go up and have a nice transition in the bottom border.
This is what I have:
And this is what I want to create:
My code:
.form {
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.input {
background: none;
color: #c6c6c6;
font-size: 1.8rem;
padding: 1.6rem;
display: block;
border: none;
border-bottom: 1px solid #c6c6c6;
width: 100%;
}
.label {
position: absolute;
color: #c6c6c6;
font-size: 1.6rem;
left: 0.5rem;
top: 1rem;
}
<div class="form">
<input class="email input" type="email" name="email" />
<label class="label" for="email">Email Address</label>
</div>
<div class="form">
<input class="password input" type="password" name="password" />
<label class="label" for="password">Password</label>
</div>
I've searched a lot but every code example I found was with SCCS, SASS and I don't understand it. So please help me with plain CSS. Any help would be greatly appreciated!
I created an animated demo using HTML and CSS.
.main {
width: 500px;
margin: 50px 100px;
;
}
.form-group {
position: relative;
margin-bottom: 45px;
}
input {
display: block;
width: 300px;
font-size: 14pt;
padding: 10px;
border: none;
border-bottom: 1px solid #ccc;
}
input:focus {
outline: none;
}
label {
position: absolute;
top: 10px;
left: 5px;
color: #999;
font-size: 14pt;
font-weight: normal;
pointer-events: none;
transition: all 0.2s ease;
}
input:focus ~ label,
input:valid ~ label {
top: -20px;
font-size: 10pt;
color: #5264AE;
}
.bar {
display: block;
position: relative;
width: 320px;
}
.bar:before,
.bar:after {
content: "";
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #5264AE;
transition: all 0.2s ease;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
<div class="main">
<div class="form-group">
<input type="text" name="email" required />
<span class="highlight"></span>
<span class="bar"></span>
<label for="email">Email</label>
</div>
<div class="form-group">
<input type="password" name="password" required />
<span class="highlight"></span>
<span class="bar"></span>
<label for="password">Password</label>
</div>
</div>
I attached your code modified to work as intended, you can change any value to customize as you want but here's an explanation of how it works:
Input element
I added a z-index so that the user can click where the label is positioned and click the input instead of the label itself, also added a transition to make the animation smooth.
input:focus refers when input is active (user click or selected by pressing tab key).
And here's where the magic happens and the explanations of complex selectors:
.input:focus~.label,
.input:not([value=""]):not(:focus):invalid~.label,
.input.has-content~.label {
font-size: .7rem;
top: -.4rem;
color: blue;
}
.input:focus ~ .label selects all input's element siblings with the class .label when input is focus so that when user focus in the input the label'll be above.
.input:not([value=""]):not(:focus):invalid~.label this selector'll catch when user unfocus the input but it got content, so the label don't goes down and overlap with the username. (as the password type input doesn't have value attribute I attach you a Js snippet that do the same trick for password element, simply adding the class has-content to the element)
Hope it helps you!
document.querySelector('.password').oninput = (e) => {
e.target.value.length > 0 ?
e.target.classList.add('has-content') :
e.target.classList.remove('has-content')
}
.form {
position: relative;
display: flex;
flex-direction: column;
margin: 1rem;
}
.input {
height: 20px;
background: none;
color: #c6c6c6;
font-size: 1rem;
padding: .5rem .7rem;
display: block;
border: none;
border-bottom: 2px solid #c6c6c6;
width: 100%;
z-index: 2;
transition: all .3s ease;
}
.input:focus {
outline: transparent;
border-color: blue;
}
.input:focus~.label,
.input:not([value=""]):not(:focus):invalid~.label,
.input.has-content~.label {
font-size: .7rem;
top: -.4rem;
color: blue;
}
.label {
position: absolute;
color: #c6c6c6;
font-size: 1rem;
left: 0.5rem;
top: .6rem;
transition: all .3s ease;
}
<div class="form">
<input class="email input" type="email" name="email" />
<label class="label" for="email">Email Address</label>
</div>
<div class="form">
<input class="password input" type="password" name="password" />
<label class="label" for="password">Password</label>
</div>
.contact-form {
transition: .3s;
margin-top: 120px;
/*border: 2px solid black;*/
background-color: rgb(243, 243, 243);
border-radius: 6px;
box-shadow: -4px 12px 11px 5px rgba(0, 0, 0, 0.521);
width: 475px;
height: 550px;
margin-left: 11px;
text-align: left;
align-items: center;
position: sticky;
left: 60%;
top: -20%;
user-select: all;
z-index: 4;
}
.benefit-card {
margin: 20px;
background-color: white;
text-align: center;
border: 1px solid black;
width: 300px;
height: 450px;
top: 0%;
left: 22%;
box-shadow: 2px 2px 12px 2px black;
user-select: none;
}
.benefit-card-header {
border-bottom: 3px dotted black;
padding-bottom: 11px;
}
.benefit-card-image {
-webkit-user-drag: none;
padding-top: 11px;
padding-bottom: 19px;
width: 200px;
filter: drop-shadow(2px 2px 6px black);
}
#help-me {
position: relative;
z-index: 8;
margin-top: -515px;
}
<div class="contact-form">
<h2 class="contact-form-header">Get Your Quote Today!</h2>
<form class="form-bg-pls-send-help">
<label class="contact-input-header" for="email">Email<span class="important-contact-field"> *</span></label>
<br>
<input class="contact-input" name="email" type="email" autocomplete="off" required placeholder="Your company email" />
<label class="contact-input-header" for="company">Company</label>
<br>
<input class="contact-input" name="company" type="text" required placeholder="Who do you work for?" />
<label class="contact-input-header" for="subject">Subject</label>
<input class="contact-input" name="subject" type="text" placeholder="Subject " />
<label class="contact-input-header" for="about">About</label>
<textarea class="long-input contact-input" name="about" type="text" placeholder="What does your company do?"></textarea>
<br><br>
<input class="getquote-button" type="submit" value="Get Quote" />
</form>
</div>
<div id="help-me">
<div class="benefit-card" id="bc">
<h1 class="benefit-card-header" id="bch">World Wide</h1>
<h3 class="benefit-card-description" id="bcd">No matter where you're from or where you're located we will help you grow your company!</h3>
</div>
</div>
I am building a sample website of a company. I have a contact form set up, but the inputs are not clickable when they are in a div tag, but I need the form in one so I can properly style the form.
The form is supposed to require the input, when I click on the Get Quote button it allows me to edit the first input tag. This has never happened to me before and I have tried user-select, checking if the disabled attribute was used, and just about everything I can think of.
Update your css file to:
#help-me{
position: relative;
z-index: -1;
margin-top: -515px;
}
This element is covering the whole screen.
Update the z-index when you need to show it.
Your inputs are not clickable because #help-me covers all of .contact-form due to the way you have used margin-top to position it higher compared to where it would naturally sit.
Consider using flexbox to achieve your layout instead.
.layout {
display: flex
}
.contact-form {
flex: 1 1 auto;
background-color: rgb(243, 243, 243);
border-radius: 6px;
box-shadow: -4px 12px 11px 5px rgba(0, 0, 0, 0.521);
}
#help-me {
flex: 1 1 auto;
}
<div class="layout">
<div id="help-me">
#help-me
</div>
<div class="contact-form">
.contact-form
</div>
</div>
I want to display my radio buttons as so that i can give style sheet and make div clickable.
here are my radio buttons.
and I want to show them like this.
div as radio
This is what I have tried but did not work.
HTML
<div class="radio-toolbar">
<table>
<tr>
<td><input type="radio" id="radioone" name="product" value="first">
<label for="radioone">50</label></td>
<td><input type="radio" id="radiotwo" name="product" value="second">
<label for="radiotwo">100</label></td>
<td><input type="radio" id="radiothree" name="product" value="third">
<label for="radiothree">500</label></td>
</div>
CSS
.radio-toolbar input[type='radio']:focus + label {
border: 2px thin blue;
}
.radio-toolbar input[type='radio']:checked + label {
background-color: #86b1f7;
border-color: #4c4;
color: white;
}
So how can I achive this
Small help will be appreciated.
Thanks in advance :)
I had do this before.and I have the code preperd.I hope It will be useful for you.
.switch-field {
display: flex;
overflow: hidden;
direction: ltr;
float: right;
text-align:right;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
/*width: 33.33%;*/
background-color: transparent;
color: #666666;
font-size: 14px;
line-height: 1;
text-align: center;
padding: 10px 12px;
margin-left: 0px;
/*margin-right: -1px;*/
border: 1px solid #ddd;
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #F4F5F9;
box-shadow: none;
border-color: #3E7DE7;
color: #3E7DE7;
}
.switch-field label:first-of-type {
border-radius: 2px 0px 0px 2px;
}
.switch-field label:last-of-type {
border-radius: 0px 2px 2px 0px;
}
<div class="switch-field">
<input class="uk-radio" id="radio-six" type="radio" value="admin" name="user_type" checked>
<label for="radio-six">admin</label>
<input class="uk-radio" id="radio-seven" type="radio" value="user" name="user_type" >
<label for="radio-seven">user</label>
</div>
Here is one way you can customize your radio buttons.
.radio-toolbar .radio-item {
position: relative;
display: inline-block;
vertical-align: top;
margin: 15px 5px;
}
.radio-item input[type="radio"] {
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
}
.radio-item label {
padding: 10px;
color: #fff;
border-radius: 10px;
background-color: grey;
border: 1px solid #000;
}
.radio-item input[type="radio"]:checked ~ label {
border-color: #f00;
}
<div class="radio-toolbar">
<div class="radio-item">
<input type="radio" id="radioone" name="product" value="first">
<label for="radioone">50</label>
</div>
<div class="radio-item">
<input type="radio" id="radiotwo" name="product" value="second">
<label for="radiotwo">100</label>
</div>
<div class="radio-item">
<input type="radio" id="radiothree" name="product" value="third">
<label for="radiothree">500</label>
</div>
</div>
Please let me know if this helps.
You need to hide the radio buttons and the left over label is still "clickable"
.radio-toolbar input[type="radio"] {
display: none;
}
I put all the working code on codepen here: https://codepen.io/stormingorman-the-vuer/pen/ExjKRvz
Try Like This. Make Your radio-toolbar input, width: 0;
also make your radio-toolbar label Like this
.radio-toolbar label {
background-color: #A9A9A9;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
}
I want to design following material design input form using css and bootstrap. Following code is I am currently using. But it doesn't provide exact result I want.
Code Pen Link : View Source Code Here
HTML CODE :
<div class="container">
<h2>Google Material Design in CSS3<small>Inputs</small></h2>
<form>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
<p class="footer">
a tutorial by scotch.io
</p>
</div>
But I want this design :
CSS Only solution; use combination of sibling selector ~ on the label and :valid pseudo selector on the input.
body {
margin: 10px;
}
.form-group>label {
bottom: 34px;
left: 15px;
position: relative;
background-color: white;
padding: 0px 5px 0px 5px;
font-size: 1.1em;
transition: 0.2s;
pointer-events: none;
}
.form-control:focus~label {
bottom: 55px;
}
.form-control:valid~label {
bottom: 55px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">
<br>
<div class="form-group">
<input type="text" class="form-control" id="usr" required>
<label for="usr">Name</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="password" required>
<label for="usr">Password</label>
</div>
</div>
</div>
</div>
Since you've tagged Bootstrap 4, I'm assuming you wanted the solution with regards to that framework.
Setup a default form-group, label, and input markup like this;
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
Then add this css, what this would do is
position label relative to its container (form-group)
then we specified the top and left positions so that it would land
on top of the input field
I added a white background and padding to the label so that it would have a box around the label.
.form-group > label {
top: 18px;
left: 6px;
position: relative;
background-color: white;
padding: 0px 5px 0px 5px;
font-size: 0.9em;
}
Here's a fiddle with that code on bootstrap 4;
http://jsfiddle.net/rw29jot4/
For the animation, check this fiddle, we need to utilize click events and move the position of the label;
Updated code with animation;
http://jsfiddle.net/sedvo037/
EDIT: Please see my answer below which uses only CSS.
Try with this code.
HTML:
<div class="main_div">
<div class="group">
<input type="text" required="required"/>
<label>Name</label>
</div>
</div>
CSS:
.main_div{
padding: 30px;
}
input,
textarea {
background: none;
color: #c6c6c6;
font-size: 18px;
padding: 10px 10px 10px 15px;
display: block;
width: 320px;
border: none;
border-radius: 10px;
border: 1px solid #c6c6c6;
}
input:hover{
border: 3px solid black;
}
input:focus,
textarea:focus {
outline: none;
border: 3px solid black;
}
input:focus ~ label, input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
top: -5px;
font-size: 12px;
color: #000;
left: 11px;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
width: 320px;
}
input[type="password"] {
letter-spacing: 0.3em;
}
.group{
position: relative;
}
label {
color: #c6c6c6;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 15px;
top: 12px;
transition: 300ms ease all;
background-color: #fff;
padding: 0 2px;
}
I'm having a problem with setting up box & shadow around my radio button. My CSS sets box only around radio button and shows nasty white square box around it. How to set border or outline around whole Radio-button + text to make selection more distinctive.
enrgy-form {
width: 50%;
float: right;
}
.label-width {
margin-left: 22px;
white-space: nowrap;
}
.label-nowrapp {
white-space: nowrap;
}
.selected-item input:checked {
/*border: 1px solid dodgerblue;*/
box-shadow: 3px 3px 11px 1px dodgerblue;
}
<div class="form-check enrgy-form">
<label class="form-check-label label-nowrapp selected-item">
<input class="form-check-input selected-item" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()">Fuel-fired</label>
</div>
I think your best bet is to simulate the radio button with css so you can have the behavior you want.
You should first set the input to display: none and give it an id in your HTML so you can link it with the label, by giving the label a for attribute, this way you can control the check/uncheck of your radio button from the label.
Next you want to simulate the appearance of the radio button, i'll do this by adding two spans, one inside the other, so we can have a checked/unchecked status.
try this:
enrgy-form {
width: 50%;
float: right;
}
.label-width {
margin-left: 22px;
white-space: nowrap;
}
.label-nowrapp {
white-space: nowrap;
}
.selected-item {
display: none;
}
.selected-item:checked + label {
box-shadow: 0px 0px 11px 2px dodgerblue;
}
label{
padding: 3px;
}
label .bullet{
border-radius: 50%;
border: 1px solid gray;
background-color: lightgray;
margin-right: 3px;
display: inline-block;
width: 10px;
height: 10px;
position: relative;
}
.selected-item:checked + label .bullet .bullet-selected{
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 5px;
height: 5px;
background-color: gray;
}
<div class="form-check enrgy-form">
<input class="form-check-input selected-item" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()" id="someUniqueId"/>
<label class="form-check-label label-nowrapp" for="someUniqueId">
<span class="bullet">
<span class="bullet-selected"></span>
</span>
Fuel-fired
</label>
</div>
You could go the route where you style the whole radio button using :before and :after in CSS. That way you could even go nuts with animations and stuff...
It would require you to change the HTML a bit as well....
There's plenty of examples to be found if you search for "css custom radio".
[type="radio"]{
position: absolute;
left: -9999px;
}
[type="radio"] + label
{
position: relative;
padding: 0 20px;
cursor: pointer;
}
[type="radio"] + label:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 14px;
height: 14px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked + label:before{
box-shadow: 0px 1px 11px 1px dodgerblue;
}
[type="radio"] + label:after{
content: '';
display: none;
width: 10px;
height: 10px;
background: gray;
position: absolute;
top: 3px;
left: 3px;
border-radius: 100%;
}
[type="radio"]:checked + label:after {
display: block;
}
<div class="form-check enrgy-form">
<input type="radio" name="energy" id="one">
<label for="one">Fuel-fired</label>
</input>
<input type="radio" name="energy" id="two">
<label for="two">Something else</label>
</input>
</div>
Update
Here is a possible solution, you could modify it as you want!
.form-check {
position: relative;
display: inline-flex;
align-items: center;
font-size: 1rem;
}
.form-check-label {
font-size: 0.9em;
margin-right: 0.25em;
white-space: nowrap;
}
.form-check-input {
margin: 0;
margin-right: 0.5em;
}
.form-check-input:checked + .form-check-label:after {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
border-radius: 1.5em 8px 8px 1.5em;
box-shadow: 3px 3px 11px 1px dodgerblue;
}
.medium { font-size: 2rem; }
.medium input[type=radio] { zoom: 2 }
.big { font-size: 3rem; }
.big input[type=radio] { zoom: 3 }
<div class="form-check">
<input id="inputcheck" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck" class="form-check-label">Fuel-fired normal</label>
</div>
<br><br>
<div class="form-check medium">
<input id="inputcheck1" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck1" class="form-check-label">Fuel-fired medium</label>
</div>
<br><br>
<div class="form-check big">
<input id="inputcheck2" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck2" class="form-check-label">Fuel-fired big</label>
</div>