I have given an input element type checkbox, its fine but when its checked tick seems very big.
I need to make smaller that tick symbol
here is html content from browser:
<div class="defaultRoot">
<div class="defaultBody ">
<div class="checkboxWrapper">
<input id="kis-9l7v7o3vr" type="checkbox" class="kischeckbox" style="width: 24px; height: 24px; accent-color: rgb(47, 55, 93); border: 4px solid gray; border-radius: 0px; display: block; transition: border-color 0ms ease 0s, background-color 0ms ease 0s; cursor: default;">
</div>
<div class="labelWrapper">
<label class="label" data-disabled="false" for="kis-9l7v7o3vr">I agree to sell my privacy</label>
</div>
</div>
</div>
How can I make that tick smaller and thinner
Currently the browser does not (and will not) support virtual elements to the tick of the checkbox you have to customize them yourself. refer here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox
using CSS you can adjust the size of the tick inside the checkbox as follow
<!DOCTYPE html>
<html>
<head>
<title>Adjust Checkbox Tick Size</title>
<style>
.checkboxWrapper, .labelWrapper {
display: inline-block;
vertical-align: middle;
}
input[type=checkbox].kischeckbox {
display: inline-block;
width: 14px;
height: 14px;
accent-color: rgb(47, 55, 93);
border: 4px solid gray;
border-radius: 0px;
display: block;
transition: border-color 0ms ease 0s;
cursor: default;
vertical-align: middle;
}
input[type=checkbox].kischeckbox:checked + label::before {
content: "\2714"; /* tick symbol */
font-size: 16px; /* adjust the size of the tick here */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="defaultRoot">
<div class="defaultBody ">
<div class="checkboxWrapper">
<input id="kis-9l7v7o3vr" type="checkbox" class="kischeckbox">
</div>
<div class="labelWrapper">
<label class="label" data-disabled="false" for="kis-9l7v7o3vr">I agree to sell my privacy</label>
</div>
</div>
</div>
</body>
</html>
Related
I have a simple form with an input field where I created my own floating placeholder/label. I then wanted to change how the focus behave, removing shadow and alter the borders. Here is the code I have right now which is almost working:
.paddings{
padding: 5rem;
}
input.my-input:focus{
box-shadow: none;
border: thin solid rgba(0, 100, 173, 0.5);
border-top: none;
}
.floating-label{
color: rgb(80 80 80);
pointer-events: none;
position: absolute;
left: 2.5rem;
top: 0.5rem;
transition: 0.2s ease all;
}
input:focus ~ .floating-label{
color: rgb(40 40 40);
font-size: 0.85rem;
top: -0.65rem;
left: 2rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css">
<div class="row paddings">
<div class="col-md-12">
<div>
<input class="form-control my-input" type="text">
<span class="floating-label">Search</span>
</div>
</div>
</div>
All looks good when focusing on the element. However, when I unfocus there is a flash of black top border for some reason. Why is this happeneing?
I tried to remove the transition but it is still there. How can I make it transition back to the light grey color it was without the top border flashing black in between?
This is due to the border-top property on input.my-input:focus being set to none. Removing that and adjusting the negative margin on input:focus ~ .floating-label should fix it:
Edit: In response to OP's comment - changing the color of the border-top property will resolve the issue:
.paddings{
padding: 5rem;
}
input.my-input:focus {
box-shadow: none;
border: thin solid rgba(0, 100, 173, 0.5);
border-top: whitesmoke;
}
.floating-label{
color: rgb(80 80 80);
pointer-events: none;
position: absolute;
left: 2.5rem;
top: 0.5rem;
transition: 0.2s ease all;
}
input:focus ~ .floating-label {
color: rgb(40 40 40);
font-size: 0.85rem;
top: -0.65rem;
left: 2rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css">
<div class="row paddings">
<div class="col-md-12">
<div>
<input class="form-control my-input" type="text">
<span class="floating-label">Search</span>
</div>
</div>
</div>
I am working on a web form for my first official development job.
I am currently trying to make it so that my input fields placeholders don't disappear but instead i need them to shrink and move to the top of the input field.
I was able to find some code that should be getting the job done but is not.
Can anyone guide me on how to make this work?
Code I found: https://jsfiddle.net/p19j2nm5/
I've worked on this for hours trying all sorts of variations with no luck.
.wrapper /*wpcf7*/{
position:relative;
}
input {
font-size: 14px;
height: 40px;
}
.placeholder{
position:absolute;
font-size: 25px;
pointer-events:none;
left: 1px;
top: 1px;
transition: 0.1s ease all;
}
input:focus ~ .placeholder{
top: 1px;
font-size: 11px;
}
HTML from contact form 7:
<label> First Name:
[text first-name placeholder "First Name"] </label>
<label> Last Name:
[text* last-name placeholder "Last Name"] </label>
<label> Your Email:
[email* your-email placeholder "Example#Example.com"] </label>
Currently, none on my fields placeholders move when focused, but removing "~.placeholder" does make the field shrink when focused.
Example of what I am trying to get my fields to do:
input:focus ~ .lastname_floating-label,
input:focus ~ .firstname_floating-label,
input:not(:focus):valid ~ .firstname_floating-label,
input:not(:focus):valid ~ .lastname_floating-label{
top: 2px;
left: 2px;
bottom: 2px;
font-size: 11px;
opacity: 1;
}
.inputText {
font-size: 14px;
width: 200px;
height: 35px;
}
.firstname_floating-label, .lastname_floating-label {
position: absolute;
pointer-events: none;
left: 10px;
top: 10px;
transition: 0.2s ease all;
}
div{position:relative;}
<div>
<input type="text" class="inputText" required/>
<span class="firstname_floating-label">Firstname</span>
</div>
<div>
<input type="text" class="inputText" required/>
<span class="lastname_floating-label">Lastname</span>
</div>
Ok I changed according your request.
Other examples are wrong. Try to add more input and you can check that the place holder will be positioned in the first input. And than if you focus out the placeholder will cover the typed value.
Check this example if is ok using only HTML and CSS.
firstly to edit placeholders the selector you need to use is :placeholder. The effect you are trying to recreate is really just a trick with floating the form labels, instead of the placeholder text. There is a thorough explanation available here: https://css-tricks.com/float-labels-css/
If you look closely the jsfiddle example actually is not using a placeholder but a span tag with a class of .placeholder
Your own code has input placeholder attribute and you can target it and input :focus like this:
input::-webkit-input-placeholder {
color: #999;
font-size: 15px;
}
input:focus::-webkit-input-placeholder {
color: red;
font-size: 5px;
}
/* Firefox < 19 */
input:-moz-placeholder {
color: #999;
}
input:focus:-moz-placeholder {
color: red;
font-size: 5px;
}
/* Firefox > 19 */
input::-moz-placeholder {
color: #999;
}
input:focus::-moz-placeholder {
color: red;
font-size: 5px;
}
/* Internet Explorer 10 */
input:-ms-input-placeholder {
color: #999;
}
input:focus:-ms-input-placeholder {
color: red;
font-size: 5px;
}
This will make placeholder text go smaller on input focus.
Updated Daebak Do's answer after reading your comment.
I added some padding to the input, and moved the "placeholder" content inside the input (changing top value from -12px to 2px and adding a left: 2px). I also added margin-top property to make the transition smooth and not disturb the rest of the content on your page.
Now the placeholder content is located inside the input box, like on the screenshot you shared.
.wrapper{
position: relative;
}
input {
font-size: 14px;
height: 40px;
transition: padding-top 0.1s, margin-top 0.1s;
margin-top: 15px;
}
.placeholder {
position: absolute;
font-size:25px;
pointer-events: none;
left: 3px;
top: 18px;
transition: 0.1s ease all;
}
input:focus ~ .placeholder{
top: 2px;
left: 2px;
font-size: 11px;
}
input:focus{
margin-top: 1px;
padding-top: 15px;
transition: padding-top 0.1s, margin-top 0.1s;
}
<div class="wrapper">
<input type="text">
<span class="placeholder">Placeholder</span>
</div>
<p>Some content.</p>
I'm looking for css code that move the placeholder text above the input on focus. I found this code here. This code is perfect but my input tag is wrapped inside <span> and for that reason general sibling selector is not working. Any ideas how to edit this css?
<div>
<span class='blocking-span'>
<input type="text" class="inputText" />
</span>
<span class="floating-label">Your email address</span>
</div>
You can use the CSS pseudo-selector :placeholder-shown in this case to detect when to move a fake placeholder out of the way. See example below:
label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
<label>
<input placeholder=" ">
<span>Placeholder Text</span>
</label>
With the given links CSS etc, simply move the floating-label inside the blocking-span.
By using position: relative on the div the floating-label will still re-position as if it were outside the blocking-span
div {
position: relative; /* make label relate to div */
padding-top: 10px; /* make space for label */
}
.inputText {
font-size: 14px;
width: 200px;
height: 25px;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 15px;
top: 18px;
transition: 0.2s ease all;
}
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
top: -6px;
}
<div>
<span class='blocking-span'>
<input type="text" class="inputText" required/>
<span class="floating-label">Your email address</span>
</span>
</div>
If you change html structure then your reference example is work but if you don't want change html structure then you need to write little jQuery. You can check this.
$(function(){
$('.blocking-span input').on('focus', function(){
$(this).parents('.parents-elm').addClass('foucs-content'); // When focus the input area
});
$(document).mouseup(function(e){
if($(e.target).parents('.blocking-span input').length==0 && !$(e.target).is('.blocking-span input')){
$('.parents-elm').removeClass('foucs-content');
}
});
});
div{
position: relative;
}
.blocking-span{
display: block;
}
.blocking-span input{
border: 1px solid #eaeaea;
height: 80px;
padding-top: 30px;
padding-left: 20px;
padding-right: 20px;
width: 100%;
}
.floating-label{
display: inline-block;
font-size: 15px;
left: 20px;
line-height: 20px;
position: absolute;
top: -webkit-calc(50% - 10px);
top: -moz-calc(50% - 10px);
top: calc(50% - 10px);
transition: top 0.3s ease-in-out 0s;
}
.foucs-content .floating-label{
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parents-elm">
<span class='blocking-span'>
<input type="text" class="inputText" />
</span>
<span class="floating-label">Your email address</span>
</div>
I have used contact form 7 and it gaves me this additional span. But I already found solution how to block this additional span. There is a filter that can remove this contact form 7 span. Here is the link.
I've been trying to create something similar to google images (when you click on an image it 'opens' a larger version with information and links and when you click again it closes).
My task (school) is to realise this with only pure html(5) and css(3), so no javascript or JQuery or any other programming language.
I already tried using checkboxes and radio. When I use checkboxes, it will expand an 'informationbox' which will not close when I open the next one. There only needs to be one open at a time.
Therefore I also tried using radio. The problem here is that I'm not able to deselect them.
Is it possible to realise this with only html and css?
Is there anyone who can help me?
Thanks in advance!
.folder {
width: 100%;
visibility: hidden;
}
.fold {
visibility: hidden;
background-color: #8b0000;
width: 60%;
height: 0px;
color: transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
}
.toggle { display: none; }
.toggle-label {
display: inline-block;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
font-size: 11px;
color: #999;
background-color: #8b0000;
padding: 5px;
}
.toggle-label:hover {
background-color: #400000;
}
.toggle:checked ~ .fold {
height: 80px;
visibility: visible;
color: #fff;
}
.content{
width: 100%;
min-height: 0;
position: static;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.toggle:checked ~ .content {
min-height: 80px;
}
<label for="toggle1" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle2" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle3" class="toggle-label">CLOSE</label>
<div class="content">
<aside class="folder">
<input type="checkbox" name="xinfo" class="toggle" id="toggle1"/>
<div class="fold">Element 1</div>
</aside>
<aside class="folder">
<input type="checkbox" name="xinfo" class="toggle" id="toggle2"/>
<div class="fold">Element 2</div>
</aside>
<aside class="folder">
<input type="checkbox" name="xinfo" class="toggle" id="toggle3"/>
</aside>
</div>
The best solution I found till now is to use radio. You need to use 1 extra input that has no content, so it will not show when you select it. This way the other ones will close.
<aside class="folder">
<input type="radio" name="xinfo" class="toggle" id="toggle3"/>
</aside>
JSFiddle example:
https://jsfiddle.net/zv1pd6wn/
The only problem now is that the close button will be visible till the end of the animation, I already tried to solve it, but no luck, help is appreciated.
Is this you want. kindly try below code.
<label for="toggle1" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle2" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle3" class="toggle-label">CLOSE</label>
<input type="radio" name="xinfo" class="toggle" id="toggle3"/>
<div class="content">
<aside class="folder">
<input type="radio" name="xinfo" class="toggle" id="toggle1"/>
<div class="fold">Element 1</div>
</aside>
<aside class="folder">
<input type="radio" name="xinfo" class="toggle" id="toggle2"/>
<div class="fold">Element 2</div>
</aside>
</div>
--css---
.folder {
width: 100%;
visibility: hidden;
}
.fold {
visibility: hidden;
background-color: #8b0000;
width: 60%;
height: 0px;
color: transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
}
.toggle { display: none; }
.toggle-label {
display: inline-block;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
font-size: 11px;
color: #999;
background-color: #8b0000;
padding: 5px;
}
.toggle-label:hover {
background-color: #400000;
}
.toggle:checked ~ .fold {
height: 80px;
visibility: visible;
color: #fff;
}
.content{
width: 100%;
min-height: 0;
position: static;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.toggle:checked ~ .content {
min-height: 80px;
}
#toggle3:checked + .content .fold
{
visibility: hidden;
}
I need a little bit of help.
I am using the following html and css in CodePen. Basically I need it to start in a folded state rather than open.
I need the folder cover (top div) to always be unfolded as this will show information on how to open the content as the cover needs to contain a fold/unfold link. Also when I enter content in to each of the fold divs the content runs over to the next div, rather than expanding the current div as you will see in my edited CodePen below.
This would also need to be resolved so that it does not cause an issue when it is folded as the divs become misaligned.
Original CodePen
http://codepen.io/boxabrain/pen/Hhugb/
My edited CodePen
http://codepen.io/anon/pen/gmAnK
HTML
<div id="folder">
<input type="checkbox" id="toggle"/> <label for="toggle" id="toggle- label">fold/unfold</label>
<div class="fold">
Element 1
</div>
<div class="fold">
Element 2
</div>
<div class="fold">
Element 3
</div>
<div class="fold">
Element 4
</div>
<div class="fold">
Element 5
</div>
<div class="fold">
Element 6
</div>
<div class="fold">
Element 7
</div>
<div class="fold">
Element 8
</div>
</div>
CSS
body {
padding: 50px;
font-family: Arial, sans-serif;
}
#folder {
width: 300px;
padding: 10px;
}
.fold {
background: #000;
background: #000;
padding: 10px;
width: 280px;
height: 80px;
color: #999;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#toggle { display: none; }
#toggle-label {
display: inline-block;
cursor: pointer;
margin-bottom: 50px;
border: 1px solid #e5e5e5;
font-size: 11px;
color: #999;
background: #fff;
text-transform: uppercase;
border-radius: 5px;
padding: 5px;
}
#toggle:checked ~ .fold:nth-child(odd) {
margin-top: -82px;
-webkit-transform: perspective(800px) rotateX(-80deg);
-moz-transform: perspective(800px) rotateX(-80deg);
transform: perspective(800px) rotateX(-80deg);
}
#toggle:checked ~ .fold:nth-child(even) {
margin-top: -84px;
-webkit-transform: perspective(800px) rotateX(80deg);
-moz-transform: perspective(800px) rotateX(80deg);
transform: perspective(800px) rotateX(80deg);
}
Can anyone help me?
Thanks in advance
To start out in a folded state, just add :not selector like this:
#toggle:not(:checked) ~ .fold:nth-child(odd)
#toggle:not(:checked) ~ .fold:nth-child(even)
About content overflow - you need to adjust it by hands if you don't want to use Js (play with individual .folds heights and rotateX).