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" />
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 7 months ago.
Improve this question
As you can see I'm trying to make the input's border to become dark red as a user starts using it. For some reason, this code doesn't work.
What can be the problem? And how to fix that?
input:focus {
border: 1px solid darkred;
}
<input type="text" name="user_input">
By default in several browsers there is already a style when an input is focused. Your darkred boder does work, however what you are seeing is the default style, to remove it use the following outline:none; Read more here
<style>
input:focus {
border: 3px solid darkred;
outline: none;
}
</style>
<input type="text" name="user_input">
I don't "darkred" is a recognizable color name. Try using the HEX code or RGB value of dark red.
ie.
input:focus {
border: 1px solid #BD0101;
}
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;}
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 8 years ago.
Improve this question
I want to make a div like the one in screen shot I have attached.
It opens when we click on Apps and closed when click on any where else on the page. Especially the part outlined in green and gray.
I have no idea how to do it.
Thanks in advance.
You should elaborate what you want? Do you want a popup or an arrow like one shown in the screenshot?
Try this: http://jsfiddle.net/F47uy/
CSS:
#arrow{
border-left: 15px dashed transparent;
border-right: 15px dashed transparent;
border-bottom: 15px dashed grey;
margin-left:200px;
width:0;
height:0;
}
#box{
background:grey;
width:300px;
height:300px;
}