Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm looking for some techlogy that I can make an effect at the bottom of <input> element when I hover on it. Like this:
If I understand correctly, you're looking for box-shadow property. Like this:
input {
width: 280px;
height: 20px;
border: 3px inset;
}
input:hover {
box-shadow: 0 2px cyan;
}
<input type="text">
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I would like to create something like representing in the picture. I've tried different methods but none is delivering my expectation. I'm not sure how, does anyone have any idea how it should be done? https://i.stack.imgur.com/lrb7f.png
You can use border-top-left-radius and
border-bottom-left-radius:
div {
height: 200px;
width: 600px;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: black;
}
<div></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
As mentioned in the title, the width changes slightly when focusing on the input element.
This is a problem that occurs in IE11 and Firefox 83.0.
(It does not occur in chrome and safari.)
If you know the cause, please let me know.
This is probably because focusing creates a border, as you can see in the following example:
.focus:focus {
border: 5px solid green;
}
<input class="focus" />
You can fix this by using adding an empty border first:
.focus {
border: 5px solid black;
}
.focus:focus {
border: 5px solid green;
}
<input class="focus" />
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I created the div with flexbox and I need to do an effect like on the image when the element is hovered. How can I solve this problem?
Use CSS box-shadow property:
#[here is your element name]:hover {
box-shadow: inset 0 0 10px #0000ff;
}
You can use box-shadow and inset keyword:
.element:hover {
box-shadow: inset 0 0 10px #000000;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
How can I select all the elements after a checked?
input:checked + .box
{
border: 2px solid black;
}
only set border a .box but i want do it to all elements after checked
You can wrap all elements after the checkbox in a common element and this way they will all depend on the checkbox.
<input type="checkbox">
<div class="boxes-wrapper">
<div class="box"></div>
<div class="box"></div>
</div>
And then in the CSS:
input[type=checkbox]:checked + .boxes-wrapper .box {
border: 2px solid black;
}
http://plnkr.co/edit/TyLhnjGfwL0IKXJFcPRu?p=preview
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am looking for a solution to this design. I have tried pseudo classes and position: absolute but it doesn't work for multiple lines of text.
The design I want:
Thank you in advance for any help!
You can use box-shadow for this:
span {
font-size: 50px;
font-weight: bold;
box-shadow: inset 0 25px 0 white, inset 0 -22px 0 rgba(0,0,0,0.5)
}
<span>Hello!! How are you</span>