Here is my code, I want to make an underscore when hovering over input.
.form_field_container::after {
content : "";
position : absolute;
bottom : -2px;
height : 2px;
background-color : red;
left : 0;
transition : all 10s;
width : 10px;
}
.form_input:hover .form_field_container::after {
width : 100%;
}
If you do after when hovering over the element itself, which you need to emphasize, .form_field_container:hover::after{}. then everything works, but if you do form_input:hover .form_field_container::after, then for some reason the property stops being applied
<div class="form_field_container" style="margin-bottom: 22px">
<span class="enter_label">Логин</span>
<input
type="text"
placeholder="Введите ваш логин или электронную почту"
name="login"
class="form_input login_input">
</div>
Related
I'm setting up some conceptual functions (hence the probably botched way this is put together), but I'm running into an unforeseen issue with using position : absolute on the toast elements. On the right-hand products there's no issue besides the toast overlapping the products to its left (which is fine in this case), but when it triggers on the left column it extends outside the viewport.
That's why the class="diamond" is outside the toast itself, so that it can remain static regardless of the toast's position, since I assume position : absolute is not the ideal positioning for the toast.
So my question is, how can I achieve the intended effect of the toast triggering but remaining inside the viewport? My intention is for the diamond to be "anchored" to the button, with the toast itself dynamic on the horizontal axis.
Click the red square to open the toast, and the green one inside to close it.
function open(event) {
if (!event.target.closest(".product button")){
return false;
}
const parent = event.target.closest(".product");
const toast = parent.querySelector('.toast');
const diamond = parent.querySelector('.diamond');
toast.style.display = 'block';
diamond.style.display = 'block';
}
function close(event) {
if (!event.target.closest(".toast button")){
return false;
}
const product = event.target.closest(".product");
const toast = event.target.closest(".toast");
product.querySelector('.diamond').style.display = 'none';
toast.style.display = 'none';
}
addEventListener('click', open);
addEventListener('click', close);
.container {
display : flex;
flex-flow: row wrap;
justify-content : space-around;
height : 450px;
width : 300px;
background-color : grey;
}
.product {
position : relative;
height : 200px;
width : 130px;
background-color : blue;
}
.icon {
position : absolute;
top : 10px;
right : 10px;
height : 30px;
width : 30px;
background-color : red;
}
.diamond {
position : absolute;
display : none;
height : 10px;
width : 10px;
top : 50px;
right : 20px;
background-color : black;
transform : rotate(45deg);
}
.toast {
position : absolute;
display : none;
width : 160px;
height : 50px;
top : 55px;
right : 10px;
background-color : black;
border-style: solid;
border-width : thin;
border-color : red;
}
.close {
position : absolute;
display : block;
width : 20px;
height : 20px;
top : 15px;
right : 70px;
background-color : green;
}
<div class="container">
<div class="product">
<button class="icon"></button>
<div class="diamond"></div>
<div class="toast">
<button class="close"></button>
</div>
</div>
<div class="product">
<button class="icon"></button>
<div class="diamond"></div>
<div class="toast">
<button class="close"></button>
</div>
</div>
<div class="product">
<button class="icon"></button>
<div class="diamond"></div>
<div class="toast">
<button class="close"></button>
</div>
</div>
<div class="product">
<button class="icon"></button>
<div class="diamond"></div>
<div class="toast">
<button class="close"></button>
</div>
</div>
</div>
This can be the possible solution. Please replace toast css with the below css:
.toast {
position: absolute;
display: none;
width: 100%;
height: 50px;
top: 55px;
right: 0;
background-color: black;
border-style: solid;
border-width: thin;
border-color: red;
}
Hope this will help you!
I have an application with "stacked" input fields like so:
As you can see from the image, when a field is receiving focus, I only want the borders of that particular input element to be highlighted. I also want to avoid a particularly thick border by having both a top and bottom border that corresponds to the same middle lines.
Here is a Fiddle: https://jsfiddle.net/3nL426uy/
Creating the stacked input fields and applying borders is not a problem. I simply remove the bottom border on all the input fields and on the last field, I apply a bottom border.
The issue comes in when I want to apply the focus styles. As it stands currently, simply applying a different border color (used red in the example to clearly show the contrast) results in a red bottom border and a gray top border of the input field below it. Now, I may be able to use an Id selector on that particular field and apply a full border, however, how do I remove the top border of the input field below it?
const inputWrappers = document.querySelectorAll(".input-wrapper")
const wrappers = [...inputWrappers]
wrappers.forEach(wrapper => {
wrapper.addEventListener('focusin', (event) => {
event.target.classList.add('selected');
});
wrapper.addEventListener('focusout', (event) => {
event.target.classList.remove('selected');
});
})
.wrapper {
display: flex;
flex-direction: column;
}
.item {
width: 300px;
height: 30px;
padding: 5px 15px;
border: 1px solid gray;
border-radius: 0;
border-bottom: 0;
}
/* Remove the default input focus-visible outline */
.item:focus-visible {
outline: 0;
}
.input-wrapper:last-child .item {
border-bottom: 1px solid gray;
}
.selected {
border: 1px solid red;
}
<div class="container">
<div class="input-wrapper" >
<input class="item" placeholder="Enter item..." />
</div>
<div class="input-wrapper">
<input class="item" placeholder="Enter item..." />
</div>
<div class="input-wrapper">
<input class="item" placeholder="Enter item..." />
</div>
<div class="input-wrapper">
<input class="item" placeholder="Enter item..." />
</div>
</div>
I'm not sure why you've used any JavaScript here? You can just set a new focus style in the :focus-visible CSS rule, you don't need to add and remove a class when the inputs receive and lose keyboard focus.
To collapse the margins, I'd recommend applying margin-top: -1px; to each of the siblings with borders. Then, to make sure the current one has its borders on top, you can give it a z-index above its siblings. I've also added a couple of lines here to ensure that z-index won't escape the .wrapper element by creating its own stacking context.
.wrapper {
display: flex;
flex-direction: column;
/* Create a new stacking context to contain z-index */
isolation: isolate;
transform: scale(1);
}
.item {
width: 300px;
height: 30px;
padding: 5px 15px;
border: 1px solid gray;
border-radius: 0;
}
/* Remove the default input focus-visible outline */
.item:focus-visible {
outline: 0;
border-color: red;
/* Setting a z-index on the focused element ensures its borders are on top */
position: relative;
z-index: 1;
}
.input-wrapper {
/* A negative top margin lets the borders collapse */
margin-top: -1px;
}
.container {
/* Offset the negative top margin of the items */
margin-top: 1px;
}
<div class="container">
<div class="input-wrapper">
<input class="item" placeholder="Enter item..." />
</div>
<div class="input-wrapper">
<input class="item" placeholder="Enter item..." />
</div>
<div class="input-wrapper">
<input class="item" placeholder="Enter item..." />
</div>
<div class="input-wrapper">
<input class="item" placeholder="Enter item..." />
</div>
</div>
you can add 'selected' class to the div element;
wrappers.forEach(wrapper => {
wrapper.addEventListener('focusin', (event) => {
event.target.parentNode.classList.add('selected');
});
wrapper.addEventListener('focusout', (event) => {
event.target.parentNode.classList.remove('selected');
});
})
and then use sibling selector x + y to select below div, remove the top boarder.
.selected .item{
border: 1px solid red;
}
/* remove below div top border */
.selected+.input-wrapper .item{
border-top: 0;
}
.input-wrapper:last-child.selected .item{
border-bottom: 1px solid red;
}
here is the whole example
https://jsfiddle.net/2tuzi/koqrcxaw/
This question already has answers here:
Bootstrap Rows and Columns - Do I need to use row?
(4 answers)
Closed 1 year ago.
/**This code doesnt change the color of the class row1**/
html, body {
font-family :'montserrat',sans-serif;
}
h1 {
border-left : 2px solid #00f28f;
font-size : 48px;
font-weight : 400;
padding-left : 20px;
}
.main {
margin-top : 80px;
}
form input {
background : #F0f0f0;
border : none;
font-size : 36px;
padding : 20px;
width : 100%;
transition : background 0s, border-left 0s;
}
form input:focus {
background : #fff;
border-left : 2pxsolid #000;
box-shadow : none;
outline : none;
}
button.button {
background : transparent;
border : none;
color : #00f2bf;
cursor : pointer;
font-size : 36px;
padding : 20px 24px;
transition : background 0s, border-left 0s;
}
button.button:hover {
background : #00f2bf;
color : #fff;
}
.row1 {
background : yellowgreen;
}
<link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="C:\Users\kalyanasundar.s\OneDrive - HCL Technologies Ltd\Desktop\proj\proj.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<header class="header">
<div class="container">
<div class="row">
<div class="col-xs-2 col-md-2">
<h1>Kalyan The Coder</h1>
</div>
</div>
</div>
</header>
<div class="main">
<div class="container2">
<div class="row1">
<form class="form">
<div class="col-xs-8 col-md-4">
<input type="text" id="TextBox1" placeholder="Enter your query">
</div>
<div class="col-xs-4 col-md-2">
<button type="submit" class="button">post</button>
</div>
This command works fine except that the row1 color doesn't change and not sure why.
If I change row1 to row on CSS, the color of header changes. I am not sure how to change the class in the CSS style sheet.
I am beginner and would like to explore more on this.
You need to give your element height.
It helps to simplify the problem. Currently, if you add height: 100px to your row1 class, the background becomes a visible yellowgreen as you desire:
.row1 {
background: yellowgreen;
height: 100px;
}
Let's show the difference with a simplified snippet:
.row-1 { background-color: yellowgreen; }
.row-2 {
height: 100px;
background-color: red;
}
<div class="row-1"></div>
<div class="row-2"></div>
Notice how you can't see row-1 here? Adding a height, padding, or anything else that expands the div's area will make it show:
.row-1 { background-color: yellowgreen; }
<div class="row-1">
<p>This should make the row visible.</p>
</div>
I can't find a way to make an <input type="image> change into a color when the user clicks on it, meaning the space the image was occupying would be replaced by a plain color. My code is the following:
input:focus{
color:#0C6
}
and
<input type="image" src="image.jpg" />
You'll need a parent wrapper having the desired color,
and on input :focus make it transparent using opacity
.imageWrapper{
display: inline-block;
background: #0C6;
}
.imageWrapper input[type=image]{
vertical-align: top;
transition: 0.3s; /* fade nicely :) */
}
.imageWrapper input[type=image]:focus{
opacity: 0;
}
<span class="imageWrapper">
<input type="image" src="//placehold.it/60x60/f00">
</span>
Is it possible to insert units inside an input element? Inside the <input> element is preferred, but outside is acceptable.
You can use something like this.
Outside box:
<input></input><span style="margin-left:10px;">lb</span>
Inside box:
<input style="padding-right:20px; text-align:right;" value="50"></input><span style="margin-left:-20px;">lb</span>
Fiddle
You can make use of bootstrap input-group component.
Note: The example below uses bootstrap 4 classes
<div class="input-group">
<input type="number" class="form-control">
<div class="input-group-append">
<span class="input-group-text"> m </span>
</div>
</div>
Here is the result below:
I would do this by nudging an extra element (like a span) over the input using position: relative and left: -20px.
Then some padding-right on the input element to ensure that the user's input wont overlap on the new element.
Example here:
https://jsfiddle.net/peg3mdsg/1/
If you want the units to show up right beside the number, you can try this trick (https://jsfiddle.net/ccallendar/5f8wzc3t/24/). The input value is rendered in a div that is positioned on top of the input, with the value part hidden. That way the units are positioned correctly. Just make sure to use the identical styles (font sizes, colors, padding etc).
const input = document.getElementById("input");
const hiddenValue = document.getElementById("hiddenValue");
const unitsValue = document.getElementById("unitsValue");
input.addEventListener("input", () => {
hiddenValue.innerHTML = input.value;
// Only show units when there is a value?
// unitsValue.innerHTML = (input.value.length > 0 ? " km" : "");
});
.wrapper {
position: relative;
width: 80px;
}
#input {
border: 2px solid #fee400;
background-color: #373637;
width: 100%;
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
padding: 3px 3px 3px 10px;
color: white;
}
.units {
position: absolute;
top: 0;
left: 0;
right: 10px;
bottom: 0;
pointer-events: none;
overflow: hidden;
display: flex;
/* Match input styles */
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
/* includes border width */
padding: 5px 5px 5px 12px;
color: white;
opacity: 0.8;
}
.invisible {
visibility: hidden;
}
#unitsValue {
/* Support spaces */
white-space: pre;
}
<div class="wrapper">
<input id="input"type="number" value="12" />
<div class="units">
<span class="invisible" id="hiddenValue">12</span>
<span class="units-value" id="unitsValue"> km</span>
</div>
</div>
Since you are using bootstrap, you can use input-groups component and override some of the bootstrap styling :
HTML
<div class="input-group unity-input">
<input type="text" class="form-control" placeholder="Enter unity value" aria-describedby="basic-addon2" /> <span class="input-group-addon" id="basic-addon2">
lbs
</span>
</div>
CSS
.input-group {
top:40px;
width:auto;
}
.unity-input .form-control {
border-right:0!important;
}
.unity-input .input-group-addon {
background:white!important;
border-left:none!important;
font-weight:bold;
color:#333;
}
Fiddle
Here: (numbers are arbitrary and you can play around with those, what's important is to float the input and the negative margin on the span holding the measurement unit)
CSS:
#form>span {
display: inline-block;
padding-top: 5px;
margin-left: -16px;
}
#form>input {
padding: 5px 16px 5px 5px;
float:left;
}
HTML:
<div id="form">
<span class="units">lb</span>
<input type="text" placeholder="Value" />
</div>
JSFiddle DEMO
The problem I have found with all of the previous answers is that, if you change the length of the units (for example, "€/month" instead of "lb") the <span> element won't be correctly aligned.
I found a better answer in another post, and it's really simple:
Html
<div class="wrapper">
<input></input>
<span class="units">lb</span>
</div>
CSS
.wrapper{
position: relative;
}
.units {
position: absolute;
right: 14px (or the px that fit with your design);
}
This way, you can even put a long unit such as "€/month" and it will still be correctly positioned.
using bootstrap:
<label for="idinput">LABEL</label>
<div class="input-group mb-3">
<input class="form-control" name="idinput" type="text" pattern="(-?[0-9]+(\.[0-9]+)?)" [(ngModel)]="input"/>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">m3/s</span>
</div>
</div>
The only thing you can try with strictly css and html is placeholder and text align left. with jquery you could you the .addClass command.
http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/1/
input {
text-align:right;
}