I need to create an input with a border that will change when the input is focused.
The inputs should works in that way:
When input is not focused and is empty, the label should be inside the input:
Input without focus
When user focus the input, or input is filled, the label will move up and the border should be cropped so the label is not obscured by the border.
Input with focus
I've tried with adding before element on label with background, but i realized this is not the correct way because input has not background itself and depend on the subpage there can be other background color and finally the resould looked like this:
Input with focus
Input without focus
Could you please help me with this?
You can try the below code
HTML
<div class="input-control">
<input type="text" required>
<label>Placeholder</label>
</div>
CSS
.input-control {
position: relative;
}
input {
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
}
input:focus {
border: 1px solid red;
background-color:#fff;
}
label {
color: #999;
position: absolute;
pointer-events: none;
left: 10px;
top: 10px;
transition: 0.2s;
}
input:focus ~ label,
input:valid ~ label {
top: -8px;
left: 10px;
font-size: 12px;
color: red;
background-color:#fff;
padding:0 5px 0 5px;
}
You can go with this approach
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 62.5%;
background: #FFF;
}
div.centralize {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
div.input-block {
position: relative;
}
div.input-block input {
font-weight: 500;
font-size: 1.6rem;
color: #495055;
width: 350px;
padding: 15px 15px;
border-radius: 1rem;
border: 2px solid #D9D9D9;
outline:none;
}
div.input-block span.placeholder {
position: absolute;
margin: 17px 0;
padding: 0 4px;
font-family: Roboto, sans-serif;
color: #6c757d;
display: flex;
align-items: center;
font-size: 1.6rem;
top: 0;
left: 17px;
transition: all 0.2s;
transform-origin: 0% 0%;
background: none;
pointer-events: none;
}
div.input-block input:valid + span.placeholder,
div.input-block input:focus + span.placeholder {
transform: scale(0.8) translateY(-30px);
background: #fff;
}
div.input-block input:focus{
color: #284B63;
border-color: #284B63;
}
div.input-block input:focus + span.placeholder {
color: #284B63;
}
<div class="centralize">
<div class="input-block">
<input type="text" name="input-text" id="input-text" required spellcheck="false">
<span class="placeholder">
Placeholder
</span>
</div>
</div>
Check out the code below. There's no way to actually crop a border, but you can construct the top border from 2 separate elements and then shrink the right element as needed - this way you don't have to worry about the flaws of the background workaround.
let field = document.querySelector('.field');
let input = document.querySelector('.input-field');
let label = document.querySelector('.label');
let border = document.querySelector('.shrink');
input.addEventListener("click", () => {
let displacement = label.offsetWidth + 14;
// get label width, plus hardcoded gap which should ideally be computed (the initial 10px gap + 4px to give the label some space)
field.classList.add('active');
border.style.width = 'calc(100% - ' + displacement + 'px)';
})
body {
background: URL('https://www.toptal.com/designers/subtlepatterns/uploads/just-waves.png')
}
* {
font-family: sans-serif;
}
.field {
position: relative;
width: auto;
display: inline-block;
}
input {
border: none;
padding: 12px;
border-radius: 10px;
background: transparent;
outline: none;
border: 2px solid #000;
border-top: none;
position: relative;
}
.b1 {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 8px;
border-radius: 10px 0 0 0;
border-top: 2px solid #000;
}
.b2 {
content: '';
position: absolute;
top: 0;
right: 0;
width: calc(100% - 10px); /* subtract 10px to account for left corner border */
height: 8px;
border-radius: 0 10px 0 0;
border-top: 2px solid #000;
}
label {
position: absolute;
top: 12px;
left: 12px;
transition: all ease-in-out .1s;
}
.field.active label {
transform: translateY(-20px);
}
<div class="field">
<div class="top-border">
<div class="b1"></div>
<div class="b2 shrink"></div>
</div>
<label class="label">test label</label>
<input type="text" class="input-field">
</div>
Related
I want when user focuses on input field the label and border of input field should be red and when user leaves both label and border of input field should turn to green. Also when user focuses and does not enter any value both label and border again in red color.
.field {
position: relative;
}
.inName {
position: absolute;
outline: none;
z-index: 1;
border: 1px solid silver;
}
.laName {
position: absolute;
top: 7px;
left: 10px;
pointer-events: none;
font-size: 20px;
color: rgb(95, 99, 105);
z-index: 1;
background: #fff;
transition: .3s;
}
.inName:focus+.laName {
top: -12px;
font-size: 15px;
padding: 0 5px;
color: crimson;
}
.inName:not(:placeholder-shown).inName:not(:focus)+.laName {
position: absolute;
top: -12px;
pointer-events: none;
padding: 0 5px;
font-size: 15px;
background-color: #ffffff;
color: crimson;
z-index: 1;
transition: .3s;
}
.inName:focus {
border: 1px solid crimson;
}
<div class="field name">
<input type="text" class="inName" placeholder=" ">
<label for="" class="laName">Name</label>
</div>
Here, I think you could add color: green in your .inName:not(:placeholder-shown).inName:not(:focus)+.laName class and also add another class .inName:not(:placeholder-shown).inName:not(:focus) that will have border set to green. Here's your code with the changes(I commented where the changes are):
<!DOCTYPE html><html>
<head>
<style>
.field {
position: relative;
}
.inName {
position: absolute;
outline: none;
z-index: 1;
border: 1px solid silver;
}
.laName {
position: absolute;
top: 7px;
left: 10px;
pointer-events: none;
font-size: 20px;
color: rgb(95, 99, 105);
z-index: 1;
background: #fff;
transition: .3s;
}
.inName:focus+.laName {
top: -12px;
font-size: 15px;
padding: 0 5px;
color: crimson;
}
.inName:not(:placeholder-shown).inName:not(:focus)+.laName {
position: absolute;
top: -12px;
pointer-events: none;
padding: 0 5px;
font-size: 15px;
background-color: #ffffff;
/*CHANGE HERE COLOR TO GREEN*/
color: green;
z-index: 1;
transition: .3s;
}
.inName:focus {
border: 1px solid crimson;
}
/*ADD THIS*/
.inName:not(:placeholder-shown).inName:not(:focus){
border: 1px solid green;
}
</style>
</head>
<body>
<div class="field name">
<input type="text" class="inName" placeholder=" ">
<label for="" class="laName">Name</label>
</div>
</body>
</html>
That can be done using JS event listeners - focus and change
Here is a fast scratch of what you can do:
document.getElementsByTagName("input")[0].addEventListener("focus", focus);
document.getElementsByTagName("input")[0].addEventListener("change", focus);
function focus() {
var input = document.getElementsByTagName("input")[0];
if (input.value.length === 0) {
input.style.borderColor = "red"; // for input
input.nextElementSibling.style.color = "red"; // for label
} else {
input.style.borderColor = "green"; // for input
input.nextElementSibling.style.color = "green"; // for label
}
}
Also set input border color to green in CSS as default for the first load.
I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function.
Can anyone point out where I'm going wrong?
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have tried some fixes but couldn't find out the problem.
Note: I'm pretty new in this field.
You need to add addEventListener in order to append an action:
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) { // add click function
dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
background-color: grey;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I need to implement a dynamic tooltip which automatically moves itself when out of screen, as well as its arrow, depending on the position of the label. However, I am finding difficulty to do this since the tooltip's width changes depending on its content. Any help will be greatly appreciated. Thanks!
Scenario 1:
Scenario 2:
HTML:
<th *ngFor="let field of columnFields">
<a class="column-label">
<div class="custom-tooltip">
<div class="tooltip__initiator">{{field.name}}</div>
<div class="tooltip__item"[innerHTML]="getTooltipText(field.name)"></div>
</div>
</a>
</th>
STYLE:
.custom-tooltip {
position: relative;
}
.tooltip__initiator {
cursor: pointer;
z-index: 5;
}
.tooltip__item {
font-family: "ABeeZee";
font-size: 13px;
line-height: 18px;
position: absolute;
position: absolute;
min-width: 132px;
max-width: 320px;
text-align: center;
padding: 12px;
visibility: hidden;
opacity: 0;
color: white;
border: 1px solid #cecece;
border-radius: 3px;
font-weight: 500;
z-index: 6;
background: blue;
border: 1px solid blue;
border-radius: 8px;
white-space: break-spaces;
inline-size: max-content;
top: calc(70% + 1em);
}
.tooltip__item:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.custom-tooltip .tooltip__initiator:hover ~ .tooltip__item {
left: 50%;
visibility: visible;
opacity: 1;
}
.custom-tooltip .tooltip__item:after {
left: 50%;
top: -0.5em;
border-width: 0 1em 0.6em 1em;
border-color: transparent transparent blue transparent;
border-radius: 8px;
}
Inside my Angular app , i ve this form template :
<div class="row">
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Name</span>
<button class="reset_input border-0 bg-transparent p-0 m-0"><i class="icon-delete"></i>
</button>
</label>
<span class="error "><span class="alert-icon icon-error-severe" aria-hidden="true"></span>Caractère invalide</span>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Surname</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">CIN</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Ville</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Departement</span>
</label>
</div>
</div>
</div>
And i'm applying this css :
.bloc_advanced_search {
padding-top: 0.938rem;
position: relative;
margin-bottom: 1.875rem;
padding-bottom: 0.938rem;
}
#search_collapse { padding-top: 1.563rem;}
#search_collapse.show {
padding-bottom: 2.813rem;
}
.bloc_advanced_search .title_home {
font-size: 1.875rem;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.13;
letter-spacing: normal;
color: #ffffff;
padding-bottom: 0.9375rem;
position: relative;
width: calc(100% - 3.75rem);
}
.bloc_advanced_search .title_home::after {
position: absolute;
bottom: 0;
left: 0;
width: 1.875rem;
height: 0.375rem;
content: "";
background: #ff7900;
}
.bloc_advanced_search .form-input {
margin: 0 0 1.25rem;
width: 100%;
}
.bloc_advanced_search .form-input label {
position: relative;
display: block;
width: 100%;
min-height: 2.813rem;
}
.bloc_advanced_search .form-input .placeholder {
position: absolute;
display: block;
top: 1.375rem;
z-index: 2;
font-size: 1.125rem;
transition: all 200ms ease-in-out;
width: 100%;
cursor: text;
color: #808080;
}
.bloc_advanced_search .form-input input {
background: #000;
position: absolute;
top: 0.625rem;
z-index: 1;
width: 100%;
font-size: 1.125rem;
border: 0;
border-bottom: 1px solid #d8d8d8;
transition: border-color 200ms ease-in-out;
outline: none;
padding: 0;
margin: 0;
color: #fff;
padding-right: 2.813rem;
border-radius: 0;
box-shadow: none;
outline: none;
}
.bloc_advanced_search .form-input input {
height: 2.813rem;
}
.bloc_advanced_search .form-input input::-ms-clear {
display: none;
}
.bloc_advanced_search .form-input input:focus,
.bloc_advanced_search .form-input input:valid {
border-bottom: 2px solid #fff;
}
.bloc_advanced_search .form-input input:focus + .placeholder,
.bloc_advanced_search .form-input input:valid + .placeholder {
top: 0;
cursor: inherit;
font-size: 0.75rem;
color: #808080;
}
.bloc_advanced_search .btn-bottom {
padding-top: 1.25rem;
}
.bloc_advanced_search .rectangle {
width: 3.125rem;
height: 3.125rem;;
padding: 1.188rem 1rem;
background-color: #ff7900;
color: #fff;
position: absolute;
right: 0.938rem;
top: 0;
}
.bloc_advanced_search .rectangle::after {
content: "\e93f";
font-family: icon-orange, sans-serif;
transform: rotate(90deg);
display: block;
font-size: 1.25rem;
vertical-align: top;
margin-top: -0.313rem;
}
.bloc_advanced_search .rectangle.disabled {
background-color: #333333;
color: #000;
}
.bloc_advanced_search.interne .rectangle {
top: -0.938rem;
}
.bloc_advanced_search.interne .rectangle[aria-expanded=false]::after {
transform: rotate(-90deg);
}
.bloc_advanced_search .reset_input {
position: absolute;
right: 0.625rem;
bottom: -0.188rem;
font-size: 1.5rem;
z-index: 2;
color: #fff;
line-height: normal;
}
My problem is in particular in IPAD mode ,
When changing my focus from an input to another , the IOS Keyboard seems to be closed and reopened betwen an input to another , that results me to double click each time on every input to get it fosused (and in parallel a close/open keyboard each time
My purpose , is to , to keep the keyboard appearing when flying from an input to another , and with a simple one ckick , setting focus on desired input and beeing able to write.
Of course when click outside the form or inputs zone , the keyboard should diseppear .
Is there any simple way to do it properly ??
i correct it
by changing z-index , and making the input in front of the placeholder
Furthemore i set the background of input as transparent to make the plaeholder visible also
.bloc_advanced_search .form-input input {
background: transparent; /* <- THIS */
position: absolute;
top: 0.625rem;
z-index: 3; /* <- THIS */
width: 100%;
font-size: 1.125rem;
border: 0;
border-bottom: 1px solid #d8d8d8;
transition: border-color 200ms ease-in-out;
outline: none;
padding: 0;
margin: 0;
color: #fff;
padding-right: 2.813rem;
border-radius: 0;
box-shadow: none;
outline: none;
}
I'm trying to add a little feature to my website, where the user can hover over a question mark before inserting input where the question mark will display more info about what the question is asking. This is what i'm doing so far, but it's displaying the little Tool Tip feature on it's own separate line (which i know is because of the tags), but I want the Label and the little question mark to be next to each other.
<div>
<label htmlFor="dropdown"> Table Name: </label>
<div className="help-tip">
<p> More info about what this is asking for exactly.</p>
</div>
<input
className='input'
value={this.state.selectedSchema.value}
onChange={(event) => this.setState({ selectedTableName:
event.target.value })
}>
</input>
</div>
CSS:
.help-tip{
top: 18px;
text-align: center;
background-color: #0095d9;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 21px;
cursor: default;
margin-left: 320px;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display:block;
transform-origin: 0% 100%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{ /* The tooltip */
display: none;
text-align: left;
background-color: #0095d9;
padding: 10px;
width: 300px;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 10px;
line-height: 1.4;
}
.help-tip label{
display:block;
width: 300px;
height: 300;
text-align: left;
margin-left: 0px;
margin-right: 300px;
}
.help-tip p:before{ /* The pointer of the tooltip */
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#0095d9;
right:10px;
top:-12px;
}
.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
top:-40px;
left:0;
}
ToolTip HTML & CSS credit goes to: https://tutorialzine.com/2014/07/css-inline-help-tips
Check this out I used a container to use flex box on the label and the ? element also i changed the left margin of the ? element so its only 5 px away from your label. Last thing I changed was the z-index on the p element so it would be in front of the input element (this needs a position relative to work).
only showing the changed code.
html:
<div class="input-label-container">
<label htmlFor="dropdown"> Table Name: </label>
<div class="help-tip">
<p>More info about what this is asking for exactly.</p>
</div>
</div>
<input/>
css:
.input-label-container {
display: flex; <-
}
.help-tip {
top: 18px;
text-align: center;
background-color: #0095d9;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 21px;
cursor: default;
margin-left: 5px; <-
}
.help-tip p { /* The tooltip */
display: none;
text-align: left;
background-color: #0095d9;
padding: 10px;
width: 300px;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 10px;
line-height: 1.4;
position: relative; <-
z-index: 999; <-
}
Hope this helps
<div>
<div className="full-width">
<div className="float-left">
<label htmlFor="dropdown"> Table Name: </label>
</div>
<div className="help-tip">
<p> More info about what this is asking for exactly.</p>
</div>
</div>
<input
className="input"
value="Testing"
onChange={event =>
this.setState({ selectedTableName: event.target.value })
}
/>
</div>
CSS would be
.help-tip {
top: 18px;
text-align: center;
background-color: #0095d9;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 21px;
cursor: default;
margin-left: 100px;
}
.help-tip:before {
content: "?";
font-weight: bold;
color: #fff;
}
.help-tip:hover p {
display: block;
transform-origin: 0% 100%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p {
/* The tooltip */
display: none;
text-align: left;
background-color: #0095d9;
padding: 10px;
width: 300px;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: 0px;
color: #fff;
font-size: 10px;
line-height: 1.4;
top: -5px;
left: 140px;
position: absolute;
}
.help-tip label {
display: block;
width: 300px;
height: 300;
text-align: left;
margin-left: 0px;
margin-right: 300px;
}
.help-tip p:before {
/* The pointer of the tooltip */
content: "";
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #0095d9;
right: 10px;
top: -12px;
}
.help-tip p:after {
/* Prevents the tooltip from being hidden */
width: 100%;
height: 40px;
content: "";
top: -40px;
left: 0;
}
.full-width {
width: 100%;
}
.float-left {
max-width: 50%;
float: left;
}