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
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 6 months ago.
Improve this question
I have this nested html
i want to access the second sibling, whose parent is div of class "x"
i tried using
.x div:nth-child(2) {
padding-bottom: 30px;
margin-bottom: 30px;
}
<div class="x">
<div>.....</div>
<div> The One i want to change it's style</div>
</div>
The code works.
Its working, please see below. I have also added a child selector > . But without that also it should work.
.x > div:nth-child(2) {
padding-bottom: 30px;
margin-bottom: 30px;
border: 1px solid red;
color:red;
}
<div class="x">
<div>.....</div>
<div> The One i want to change it's style</div>
<div>third div</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 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">
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 am trying to style a <button> by removing the sides of the border and keeping the top and the bottom line intact. Is there any way to do this?
Remove all borders, only define the top and bottom border:
button {
border: none;
outline: none;
border-top: 1px solid #111111;
border-bottom: 1px solid #111111;
/* For styling purposes */
padding: 5px;
}
<button>button</button>
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 6 years ago.
Improve this question
I have been trying to solve this puzzle for last week and nothing works. I tried to reduce the extra space in tab panels using inspect element but it is not working. Any direction would be really appreciated for this UI level change.
Here is the link.
http://ec2-52-77-213-236.ap-southeast-1.compute.amazonaws.com/
I want to remove this unused space after return time and so on in other types of trips as well.
.round-trip .form-control {
border-radius: 0;
box-shadow: none;
height: 55px;
border: none;
width: 205px;//<=======
border-right: 1px #ddd solid;
}
for this block
<input required="" type="text" class="form-control start_date" id="datetimepicker1" value="" placeholder="Return Date and Time" name="end">
Add this to overwrite bootstrap.css
.tab-content > .active {display: inline-block;}