I'm writing a form group with two inputs, and have set {margin-left:-5px} for the second one to remove spacing between them. However, when the first input is focused, the blue glowing effect of the right border is missing. I think it's covered by the left border of the second input, so I've tried to increase its z-index, but it doesn't work. How to solve this problem? Here are the html and css codes, and the problem is shown in the picture.
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" size="1" style="border-top-right-radius: 0; border-bottom-right-radius: 0">
<input type="text" class="form-control" size="1" style="border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px">
</div>
</form>
.form-control:focus {
z-index: 2;
}
problem image
Just add position: relative;
.form-control:focus {
position: relative;
}
Related
There is a side bar with a couple of labels and input. I want to remove the space between a pair of label and input. How to remove the space?
Space between label and input.
Here is the main part of html
* {
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.container {
width: 80%;
margin: auto;
}
aside#sidebar-wrapper {
padding: 5px;
width: 300px;
border: 2px black solid;
}
aside#sidebar-wrapper input {
width: 100%;
}
<div class="container">
<aside id="sidebar-wrapper">
<h1>Get A Quote</h1>
<form action="" class="form-sidebar-wrapper">
<div class="sidebar-input-wrapper">
<label>Name</label>
<input type="text" placeholder="Name">
</div>
<div class="sidebar-input-wrapper">
<label>Email</label>
<input type="email" placeholder="Enter Email">
</div>
<button type="submit" class="button_1">Send</button>
</form>
</aside>
</div>
The only way to tackle this issue is by setting margin or padding to the two elements.
I would advise you to set padding & margin 0 for both label and input and if you still want to reduce the gap, sometimes you will probably need to set a negative margin which is not recommended but still does the job.
try this on your label
.label {
/*margin-bottom: -5px;*/
margin-bottom: 0px
}
In HTML
<label class="lable">...</label>
Again, this practice of adding a negative margin is highly discouraged.
EDIT: I missed the display:inline-block property, which someone in comments reminded me of
Above fix won't work, Making margin-bottom: 0 for the label will work though
a js fiddle:
* {
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.container {
width: 80%;
margin: auto;
}
aside#sidebar-wrapper {
padding: 5px;
width: 300px;
border: 2px black solid;
}
aside#sidebar-wrapper input {
width: 100%;
}
.lable {
margin-bottom: 0px;
}
<div class="container">
<aside id="sidebar-wrapper">
<h1>Get A Quote</h1>
<form action="" class="form-sidebar-wrapper">
<div class="sidebar-input-wrapper">
<label class="lable">Name</label>
<input type="text" placeholder="Name" class="nameINput">
</div>
<div class="sidebar-input-wrapper">
<label class="lable">Email</label>
<input type="email" placeholder="Enter Email">
</div>
<button type="submit" class="button_1">Send</button>
</form>
</aside>
</div>
Actually, this is caused by... New line in the code. That is new line between label and input. I am not sure why exactly this new line is being displayed, but I've encountered similar behavior even when the are in different order, when it can be rendered as space.
In fact, even in the snippet, if you try selecting the label text and then move your mouse slightly down to where that "extra space" is you will see how selection increases by 1 character of "nothing".
I thought I was seeing things, but https://www.tutorialrepublic.com/faq/how-to-remove-the-space-between-inline-block-elements-in-css.php actually suggests removing those new lines to remove the extra space in the 1st method shown on page.
So... I guess we should just be careful with extra new lines in our code. Or use flex on parent as https://www.geeksforgeeks.org/how-to-remove-the-space-between-inline-block-elements/ suggest (font-size: 0 does not always work for me)
If you have no margin or padding applied and you still have this space, you could either use display: flex on the parent or display: block/inline-block on the label to get rid of these.
I want to change the area( margin ) around my custom modal to this color #494c4e54 . If the user clicks outside the modal it closes, It would be nice if it wont be affected
CSS
.mojmodal
{
background: #e2e3e4;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: none;
width: 350px;
height: 400px;
border-radius: 2px;
border-bottom: 5px solid gray;
}
HTML
<div class="mojmodal gorkaze">
<form name="vnos" method="post">
<div><legend>Prijava</legend>
<label>Uporabniško ime</label><br>
<input type="text" name="ime">
</div>
<div>
<br><label>Geslo</label>
<br><input type="password" name="geslo">
</div>
<div><input type="checkbox" name="zapomni"> Zapomni si me<br><br>
<button type="submit" class="btn btn-primary" name="tipkamodal">Prijava</button></div><div>
Še nimate računa?
</div></form>
Login();
</div>
Here is a picture of the highlighted modal(click here)
There is no margin color property.
To achieve this effect you'll need additional elements or pseudo elements.
J.D. commented on your question this link: https://developer.mozilla.org/en-US/docs/Web/CSS/:target#Pure-CSS_lightbox which should help you create the effect.
I'd also suggest you brush up on your CSS box model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
I have calendar option to select the date. The calendar icon showing in outside of text-box.
<div class="input-prepend">
<input class="span12" type="text" readonly="readonly" id="date" name="date" placeholder="dd-mm-yyyy" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
How to show icon span in inside text-box using CSS?
Thanks
make a box/div looking like input box and put calendar icon to left
and insert a input element without border
input{
border: 0 solid #fff !important;
}
Note: use calendar icon in label so when user click on icon it gets focus to input tag
see the example at go to input box in stay in touch
.input-prepend {
display: inline-block;
position: relative;
}
.add-on {
position: absolute;
right: 5px;
top: 5px;
}
I'm using PureCSS and have a form that looks like:
<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Username">
<textarea class="pure-input-1-2" placeholder="About me bio"></textarea>
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Another Group">
<input type="text" class="pure-input-1-2" placeholder="More Stuff">
</fieldset>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>
Here's a JSfiddle.
Basically my issue is that with the two input group, the borders on focus show around the entire input, but with the one input and one textarea group, the borders on focus don't show on top of the textarea.
Add position:relative to the textarea on focus. In addition, if you take the top:-2px off, you won't get a jump when you focus on it.
Fiddle
CSS
.pure-form .pure-group input:last-child,
.pure-form .pure-group textarea:last-child {
border-radius: 0 0 4px 4px;
}
textarea:focus{
position:relative;
}
Try adding :
margin-top: 1px;
If you have a look at the CSS for the first input field in you example you'll see:
pure-form .pure-group input:first-child {
top: 1px;
border-radius: 4px 4px 0 0;
}
The top: 1px is pushing the input field down one pixel and covering the text-area field below it. You could remove the top: 1px rule from the CSS or add a margin-top: 1px rule to the .pure-form .pure-group textarea:last-child class.
I just made my search button/icon clickable by adding a transparent button onto the input field. Not sure this is the right way to go about it but I couldn't think of anything else outside of jQuery/javascript which I'm not very experienced with. Seems to work fine except the hidden button isn't totally hidden... I've made the background transparent and said border: none but I can see a little shadow of it. See screenshot below and put on some glasses because it's barely noticeable. Still bugs me very much. I've looked through my stylesheet and can't find any shadow setting for inputs so unsure how to fix this.
HTML:
<div id="SearchForm" style="width: 120px; height: 29px; position: relative; top: 16px; right: 17px; padding-left: 20px;">
<form action="%%GLOBAL_ShopPath%%/search.php" method="get" onsubmit="return check_small_search_form()">
<span class="add-on" style="position: absolute; top: 6px; right: 4px;"><i class="icon-search"></i></span>
<input type="text" class="input-small" name="search_query" id="search_query" placeholder="Search..." value="%%GLOBAL_OriginalSearchQuery%%" title="Search" />
<input type="submit" value="" name="Search" title="Search" style="position: absolute; top: 2px; right: 0; background: transparent; border: none; width: 35px; height: 22px;" />
</form>
</div>
CSS:
input[type="submit"] {
cursor: pointer;
-webkit-appearance:none;
}
That is I guess border-top of the button, or the button is not totally hidden. So you can try this out:
<input type="submit" />
And then use CSS to change the image, to the background-image for the submit button. So when you will click the form will be submitted!
input[type="submit"] {
/* here, you can change the background-image
* background-image: url('../link/to/file.png');
*/
}
If you really wanna get rid of it, then remove the above image, and use it as the background-image of the button. This way you won't have to worry about the button.
You can hide the button using:
input[type="submit"] {
opacity:0.0;
filter:alpha(opacity=00); // for ie..
}
Also, if you provided a link to the website then we might have noticed what was causing the issue, or just the source code.