Is it possible to have the same CSS transformation execute when the input has been autofilled using pseudo="-internal-input-suggested as it does when the input is focused?
In this case, if the input has been autofilled, then it applies transform: translatey(-23px);. Currently if there is any autofilled information in the input, the label covers the input, and only when you tap body does the input receive the focus state as seen in the screenshot below:
* {
box-sizing: border-box;
}
.input__html {
display: flex;
flex-direction: column
}
.input__label {
width: 100%;
margin: 6px 0;
position: relative;
border-radius: 3px;
color: #868ca0;
}
.input__label .input__span {
position: absolute;
font-weight: 700;
top: 18px;
padding: 0px 6px;
left: 6px;
background: white;
font-size: 14px;
color: #868ca0;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
pointer-events: none;
}
.input__label .input__focus {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.input__label input {
border: 1px solid #e4e4e4;
background: #ffffff00;
color: #6f6666;
font-weight: 700;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
font-family: inherit;
border-radius: 3px;
padding: 0px 12px;
height: 48px;
font-size: 16px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.input__label input[value]+.input__span,
.input__label input:valid+.input__span,
.input__label input:not(:placeholder-shown)+.input__span,
.input__label input:focus+.input__span {
-webkit-transform: translatey(-23px);
transform: translatey(-23px);
outline: none;
}
.input__label input:focus {
outline: none;
}
<div class="input__html">
<label class="input__label">
<input name="input" type="text" required autocomplete="username" placeholder=" ">
<span class="input__span">Name</span>
<span class="input__focus"></span>
</label>
</div>
The solution was to access the autocomplete :-webkit-autofill:
.input__label input:-webkit-autofill + .input__span,
.input__label textarea:-webkit-autofill + .input__span,
Related
hay guys i want to ask about input:focus on css. i have an input with effect, when i want to fill the input the label will transition to top. When i was using google chrome the input:focus work very well, but when i use mozilla nothing change in my input. Are you have solution guys?
<div class="form-input">
<input type="text" id="fullname" class="form-textbox-ep" name="name" value="{name}" required>
<label for="fullname" class="form-label-ep">Nama Perusahaan</label>
</div>
.form-textbox-ep
{
border: none;
border-bottom: 1px solid #E2E2E2;
font-weight: 400;
height: 74px;
width: 100%;
font-size: 18px;
color: #3B61AA !important;
position: relative;
line-height: 15px;
}
.form-textbox-ep:focus ~ .form-label,.form-textbox-ep:valid ~ .form-label-ep,.form-textbox-ep:read-only ~ .form-label-ep {
top: 18px;
left: 0;
font-size: 13px;
cursor: pointer;
}
.form-textbox-ep:focus,.form-textbox-ep:valid, .form-textbox-ep:read-only{
padding-top: 25px;
}
.form-label-ep{
position: absolute;
top: 28px;
left: 0;
color: #000;
cursor: text;
transition: all .15s ease-in-out 0s;
font-size: 15px;
line-height: 15px;
}
Your code is quite busy so i rewrite that code with below will give you desire result.
.box {
width: 300px;
margin: 40px 3%;
position: relative;
}
:focus {
outline: none;
}
input[type="text"] {
font: 15px/24px "Lato", Arial, sans-serif;
color: #333;
width: 100%;
box-sizing: border-box;
letter-spacing: 1px;
}
.effect {
border: 0;
padding: 4px 0;
border-bottom: 1px solid #ccc;
background-color: transparent;
}
.effect~.focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3399ff;
transition: 0.4s;
}
.effect:focus~.focus-border,
.has-content.effect-16~.focus-border {
width: 100%;
transition: 0.4s;
}
.effect~label {
position: absolute;
left: 0;
width: 100%;
top: 9px;
color: #aaa;
transition: 0.3s;
z-index: -1;
letter-spacing: 0.5px;
}
.effect:focus~label,
.has-content.effect-16~label {
top: -16px;
font-size: 12px;
color: #3399ff;
transition: 0.3s;
}
<div class="box">
<div class="col-3 input-effect">
<input class="effect" type="text" placeholder="">
<label>First Name</label>
<span class="focus-border"></span>
</div>
</div>
I have a currency converter,
This is how it looks like:
https://gyazo.com/661e6713051bb5ddb288a92f66b24c92
So, I have that arrow inserted after a class with :after , however, on some themes(We are doing a project for shopify) i have to give the arrow a right in order for it to look good. Any ideeas how can i get the arrow inside the border?
the css looks like
.vitals-nice-select {
-webkit-tap-highlight-color: transparent;
background-color: #fff;
color: #333;
box-sizing: border-box;
clear: both;
cursor: pointer;
display: block;
float: left;
font-family: inherit;
font-size: 14px;
font-weight: normal;
height: 42px;
line-height: 40px;
outline: none;
padding-left: 18px;
padding-right: 23px;
position: relative;
text-align: left !important;
webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
width: auto;
border-radius: 5px;
border: solid 1px #e8e8e8;
}
.vitals-nice-select:hover {
border-color: #dbdbdb;
}
and for the arrow
.vitals-nice-select:after {
border-bottom: 2px solid #999;
border-right: 2px solid #999;
content: \'\';
display: block;
height: 5px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
width: 5px;
}
Is this what u want?
.vitals-nice-select {
-webkit-tap-highlight-color: transparent;
background-color: #fff;
color: #333;
box-sizing: border-box;
clear: both;
cursor: pointer;
display: block;
float: left;
font-family: inherit;
font-size: 14px;
font-weight: normal;
height: 42px;
line-height: 42px;
outline: none;
padding-left: 18px;
padding-right: 30px;
position: relative;
text-align: left !important;
webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
width: auto;
border-radius: 5px;
border: solid 1px #e8e8e8;
}
.vitals-nice-select:hover {
border-color: #dbdbdb;
}
.vitals-nice-select:after {
border-bottom: 2px solid #999;
border-right: 2px solid #999;
content: '';
display: block;
height: 5px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
transform: rotate(45deg) translateX(-50%);
transition: all 0.15s ease-in-out;
width: 5px;
}
<div class="vitals-nice-select">TextTextText</div>
See the fiddle here: https://jsfiddle.net/9o1L1Lg4/
Add the following properties:
.vitals-nice-select {
position: relative;
}
.vitals-nice-select:after {
position: absolute;
right: 0;
/* If you want to center it vertically add the following properties */
top: 50%;
transform: translatey(-50%);
}
I am trying to get a CSS tooltip to work correctly which I found on the thoughtbot blog. The only changes that I have made to the code is to change from Scss to CSS, and simplify the html a touch. However, when in CSS, it doesnt work.
The original article can be found here, where there is also a working codepen that I copied as the basis for my CSS version https://robots.thoughtbot.com/you-don-t-need-javascript-for-that
.container {
margin-top: 100px;
margin-left: 100px;
border: 2px solid red;
}
/* //The good stuff */
.tooltip-toggle {
cursor: pointer;
position: relative;
}
/* //Tooltip text container */
.tooltip-toggle::before {
position: absolute;
top: -80px;
left: -80px;
background-color: #2B222A;
border-radius: 5px;
color: #fff;
content: attr(data-tooltip);
padding: 1rem;
text-transform: none;
transition: all 0.5s ease;
width: 160px;
}
/*
//Tooltip arrow */
.tooltip-toggle::after {
position: absolute;
top: -12px;
left: 9px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #2B222A;
content: " ";
font-size: 0;
line-height: 0;
margin-left: -5px;
width: 0;
}
.tooltip-toggle::before {
color: #efefef;
font-family: monospace;
font-size: 16px;
opacity: 0;
pointer-events: none;
text-align: center;
}
.tooltip-toggle::after {
color: #efefef;
font-family: monospace;
font-size: 16px;
opacity: 0;
pointer-events: none;
text-align: center;
}
/* //Triggering the transition */
.tooltip-toogle:hover::before {
opacity: 1;
transition: all 0.75s ease;
}
.tooltip-toggle:hover::after {
opacity: 1;
transition: all 0.75s ease;
}
Below is my html.
<html>
<body>
<div class="container tooltip-toggle" data-tooltip="Sample text for your tooltip!>
<div class="label">Hello
</div>
</div>
</body>
</html>
So, I laughed very hard when I figured your problem out:
/* //Triggering the transition */
.tooltip-toogle:hover::before {
opacity: 1;
transition: all 0.75s ease;
}
.tooltip-toogle:hover
Obviously should be toggle, lol.
Edit: cleaned css and fixed it
.container {
margin-top: 100px;
margin-left: 100px;
border: 2px solid red;
}
/* The good stuff */
.tooltip-toggle {
cursor: pointer;
position: relative;
}
/* Tooltip text container */
.tooltip-toggle::before {
position: absolute;
top: -80px;
left: -80px;
background-color: #2B222A;
border-radius: 5px;
color: #fff;
content: attr(data-tooltip);
padding: 1rem;
text-transform: none;
transition: all 0.5s ease;
width: 160px;
}
/* Tooltip arrow */
.tooltip-toggle::after {
position: absolute;
top: -12px;
left: 9px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #2B222A;
content: " ";
font-size: 0;
line-height: 0;
margin-left: -5px;
width: 0;
}
.tooltip-toggle::before, .tooltip-toggle::after {
color: #efefef;
font-family: monospace;
font-size: 16px;
opacity: 0;
pointer-events: none;
text-align: center;
}
/* Triggering the transition */
.tooltip-toogle:hover::before, .tooltip-toggle:hover::after {
opacity: 1;
transition: all 0.75s ease;
}
is there a way to remove invisible space on top/bottom of a <a> tag.
I have tryed removing paddings, margins and other positions.
HTML:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><div class="cog"></div></button>
<div id="myDropdown" class="dropdown-content">
<div class="dop"></div>
Text
</div>
</div>
CSS:
.dropbtn {
height: 34px;
width: 34px;
background: #f0f0f0;
border-radius: 3px;
border: none;
cursor: pointer;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
vertical-align: none;
}
.dropbtn:hover, .dropbtn:focus {
background: #ebebeb;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 100px;
margin-left: 100px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
width: 140px;
border-radius: 3px;
left: -53px;
top: 48px;
}
.dropdown-content a {
color: #b7b7b7;
text-decoration: none;
font-family: OpenSans-Regular;
font-size: 12px;
text-align: center;
display: block;
outline-width: 0px;
}
.show {display:block;}
This is how it looks right now -
This is how it should look like -
Kinds regards, Ričards.
I think you are talking about the line-height property. Try using a low value :
line-height: .8em;
There is no extra padding or margin at the top and bottom of text.
This is normal behaviour of font specification:
Font-size is defined by 13, the white spaces are defined by 14 and probably 15 (since you don't have letters with parts below baseline).
You can override this by force line-height lower than font-size. But you must remember that every font has got different 14 in specification and you must choose ratio line-height/font-size (for example 0.8em) by experiment.
Change line-height to 10px or 12px as you find according to your needs
body {
background: #e0e0e0;
}
.dropbtn {
height: 34px;
width: 34px;
background: #f0f0f0;
border-radius: 3px;
border: none;
cursor: pointer;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
vertical-align: none;
}
.dropbtn:hover, .dropbtn:focus {
background: #ebebeb;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 100px;
margin-left: 100px;
}
.dropdown-content {
position: absolute;
background-color: #ffffff;
width: 140px;
border-radius: 3px;
left: -53px;
top: 48px;
}
.dropdown-content a {
color: #b7b7b7;
text-decoration: none;
font-family: OpenSans-Regular;
font-size: 12px;
text-align: center;
display: block;
outline-width: 0px;
line-height: 12px;
}
.show {display:block;}
<div class="dropdown">
<button class="dropbtn"><div class="cog"></div></button>
<div id="myDropdown" class="dropdown-content">
<div class="dop"></div>
Text
</div>
</div>
I really like the search bar on this website, https://www.marmosetmusic.com/
I can do it very basically using CSS steps animation but it doesn't look smooth and I have to change the timing based on the length of the placeholder.
Also, I am not sure how to overlay it as such over an image or parallax design.
What I have tried is:
HTML:
<title>Search</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/type-style.css" media="screen" type="text/css" />
<script src="js/modernizr.js"></script>
</head>
<body>
<h1>
<i class='fa fa-anchor'></i>
Test.com
</h1>
<div class='overlay'></div>
<div class='wrapper'>
<form class='search'>
<input placeholder="search..." required='true' type='text'>
<button class='search-button'>
<i class='fa fa-search'></i>
</button>
</form>
</div>
<script src="js/index.js"></script>
</body>
</html>
CSS:
#import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300,400);
body {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/16902/holidayphoto.jpg);
background-position: 0 90%;
overflow: hidden;
}
body, html {
height: 100%;
}
h1 {
color: #fff;
font-size: 3.5em;
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
padding: 20px;
font-weight: 300;
opacity: 1;
}
h1 i {
color: #e74c3c;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
background: #000;
opacity: 0.92;
top: 0;
left: 0;
}
.wrapper {
width: 560px;
height: 60px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -280px;
margin-top: -20px;
-webkit-font-smoothing: antialiased;
z-index: 999999;
}
input[type="text"] {
font-family: 'Alegreya Sans SC', sans-serif;
width: 480px;
height: 40px;
padding: 10px 0 10px 20px;
font-size: 24px;
font-weight: 300;
color: #eee;
background: #222;
border: none;
float: left;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
input:focus {
color: #fff;
outline: none;
background: #1a1a1a;
}
button[type="submit"], .search-button {
border: 0;
width: 60px;
height: 60px;
background: #222222;
border-left: solid 5px #222222;
text-align: center;
float: left;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
button[type="submit"] i, .search-button i {
color: #fff;
font-size: 40px;
line-height: 1.4em;
}
.search-button:focus {
outline: none;
}
.search-button:hover {
background: #e53f2e;
border-left: #e53f2e;
}
.switch-wrapper {
font-family: 'Alegreya Sans SC', sans-serif;
width: 70px;
height: 40px;
margin: 10px;
border-radius: 40px;
position: absolute;
background: #444;
right: 118px;
cursor: pointer;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper:before {
position: absolute;
content: 'FLIGHT';
line-height: 2.7em;
left: -54px;
}
.switch-wrapper:after {
position: absolute;
content: '+ HOTEL';
line-height: 2.7em;
right: -60px;
}
.switch-wrapper .switch {
width: 36px;
height: 36px;
margin: 2px 2px;
background: #222;
border-radius: 50%;
position: absolute;
}
.switch-wrapper .switch:hover {
background: #282828;
}
.rent {
position: absolute;
left: 30px;
}
.switch-wrapper.switched:after {
color: #3498db;
text-shadow: 0 0 4px #3498db;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper.switched:before {
color: #cfcfcf;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper.not-switched:after {
color: #cfcfcf;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper.not-switched:before {
color: #3498db;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.not-valid {
display: none;
width: 100%;
height: 30px;
background: #e74c3c;
position: absolute;
opacity: 1;
top: 70px;
}
.not-valid span {
font-family: 'Alegreya Sans SC', sans-serif;
color: #fff;
padding: 10px;
line-height: 1.96em;
}
.not-valid span i {
padding-right: 4px;
}
.not-valid span .error-close {
color: #7b190f;
float: right;
padding: 7px 10px 0 0;
cursor: pointer;
}
label.error {
display: none !important;
}
JS
var s = $('.switch');
var sw = $('.switch-wrapper');
$('input').on('click', function(a) {
a.preventDefault();
});
function switchToggle() {
s.stop(false,true).animate({left: "0"}, 200);
}
s.on('click', function() {
if (sw.hasClass('switched')) {
switchToggle();
} else if (sw.hasClass('not-switched')) {
s.stop(false,true).animate({left: "30px"}, 200);
}
sw.toggleClass('switched not-switched');
});
$('.search').validate({
invalidHandler: function(event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
$("div.not-valid span").html("<i class='fa fa-warning'></i> Please type search <i class='fa fa-times error-close'></i>");
// Should use .stop() function.
$(".not-valid").fadeIn();
setTimeout(function() {
$(".not-valid").fadeOut();
}, 2000);
$('.error-close').on('click', function() {
$(".not-valid").fadeOut();
});
} else {
$(".not-valid").fadeOut();
}
}
});
All in one is found in this jsfiddle demo.
Any help would be appreciated!
Here is a simple example of how to style a search field in a similar manner as seen in your example. display: flex does most of the magic here, the rest is getting rid of backgrounds and borders or styling the submit button with an image
For the typing animation you should use a premade plugin like typed.js
.search {
background: rgba(0, 0, 0, 0.1);
display: flex;
}
.search input {
border: 0px;
margin: 0px;
padding: 0px;
}
.search input[type="text"] {
flex: 1;
background: transparent;
font-size: 2em;
}
.search input[type="submit"] {
font-size: 2em;
margin: 4px;
width: 1em;
height: 1em;
cursor: pointer;
background-color: transparent;
background-image: url(https://cdn0.iconfinder.com/data/icons/basic-lines/39/search-512.png);
background-size: cover;
}
.search input:focus {
outline: none;
}
<div class="search">
<input type="text" name="search">
<input type="submit" value="">
</div>