I have a search input field and a submit button direct beside the input field. They have the same padding, but Firefox adds 1px to the button padding, but not to the input padding. Line-height makes it worse. Has anyone a solution for this?
.form,
button {
padding: 5px;
font-size: 12px;
border: 1px solid black;
box-sizing: border-box;
}
<input type="text" class="form" placeholder="Text" /><button class="button">Click</button>
http://jsfiddle.net/r5y7byag/4/
This will fix it
button::-moz-focus-inner {
padding: 0;
border: 0
}
Including the border rule above is necessary for buttons to look the same in both browsers.
It also removes the dotted outline when the button is active in Firefox.
To fix it on the input elements aswell add:
input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner
See this fiddle
CSS:
.form,
button {
font-size: 12px;
border: 1px solid black;
box-sizing: border-box;
line-height:30px;
padding-left:5px;
}
Related
EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, that being Firefox, and I'll be using a hack to target that browser only.
I have an input element of type submit (i.e., basically a submit button). The text displayed in this element, as defined in the element's value attribute, appears too low (i.e., too close to the bottom of the button instead of vertically centered). The button has a fixed height.
Naturally, I want to move the button's text, as defined in the value attribute, one or two pixels upwards.
I've tried a few things with the button's padding (top and bottom), but that didn't change anything. [Is that to be expected, BTW?] Therefore, I would like to use relative positioning to move the text upwards a bit.
The thing is, however, that I need to target the text itself, NOT the input/button element. And that's of course because the button itself should stay at its current location, I only want to move the TEXT displayed on the button.
Thus my question: Is there a way, in CSS, to target not the button but only its displayed text (as defined in the value attribute) ?
Of course, other solutions (preferably CSS only) are welcome as well.
Code:
HTML:
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<div class="erom" id="erom2">
<input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
</div>
</form>
CSS:
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
}
.erom {
height: 100%;
display: inline-block;
box-sizing: border-box;
}
#erom2 {
border: solid 1px #452F5D;
width: 27%;
display: inline-block;
box-sizing: border-box;
}
#zoekknop {
float: right;
height: 100%;
color: white;
font-size: 19px;
box-sizing: border-box;
background-color: #446666;
color: white;
letter-spacing: 2px;
border: solid 1px white;
width: 100%;
}
And finally the part where I'm targeting Firefox only, and where I can't get the padding working (and to be sure, the "media query" (it's not really a media query) does work, and in any case I've also tried this without the media query, i.e. as part of the regular CSS):
#-moz-document url-prefix() {
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}
For some reason form elements are particular and quirky about font.
Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.
On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form> 1.4.
Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).
This ruleset may help you for Firefox:
input::-moz-focus-inner {
border: 0;
padding: 0;
/* Some users have said these last two are
unnecessary or should be -2px */
margin-top:0;
margin-bottom: 0;
}
Here's some changes I did to your button and search field:
#zoekknop {....
....
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0;
}
Review the Snippet below:
#form {
font: 400 16px/1.4'Verdana';
}
#form .sub {
font: inherit;
width: 9ex;
color: blue;
border-radius: 5px;
}
#form .sub:hover {
color: cyan;
background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
color: white;
font-size: 18px;
box-sizing: border-box;
background-color: #446666;
color: white;
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
<form id="form" name="form">
<input type="submit" class="sub" value="Submit" />
</form>
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<input id="zoekknop" type="submit" method="GET" value="Search!" />
</form>
This should work
#buttonID{
width: 500px;
height: 500px;
padding-bottom: 100px;//pushes text up inside the button
}
Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.
Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.
The code:
<input class="text" type="text" value="text"><input class="submit" type="submit" value="submit">
with styling:
.text, .submit {
outline: none;
border: none;
padding: none;
margin: none;
background: red;
padding: 3px;
box-sizing:border-box;
}
(https://jsfiddle.net/citizenfive/04camn42/)
creates 2 input elements with different heights (submit is larger by ~1px).
The code works fine on Chrome. Is there a way to solve this for Firefox?
All browsers have differences between default behaviours and styles, but firefox is more flexible with S.O. and form elements are controlled by default by the operating system.
The solution is remove padding or use height with EM meassures.
Remove padding:
https://jsfiddle.net/04camn42/2/
.class { padding: 0 }
Using EM height:
https://jsfiddle.net/04camn42/3/
.class {
height: 1.5em
}
IF you use EM you don't worry about responsiveness and user choices.
Removed padding and added height, this works fine in Chrome and Firefox but I don't know whether this fix is fine for you.
New css,
.text, .submit {
outline: none;
border: none;
padding: none;
margin: none;
background: red;
/* padding: 3px; */
box-sizing: border-box;
height: 23px;
}
In order to remove all padding and borders from buttons and inputs for Firefox this handy little CSS snippet will help you out.
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Also, what's been suggested by the other posters: use box-sizing: border-box; on all form elements to make them behave in all browsers (apart from Firefox).
.text, .submit {
outline: none;
border: none;
padding: none;
margin: none;
background: red;
padding: 3px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
see in i
I want to align the checkbox, label and text input in a same line using css. I can do it by using the default template of the browser.
However I really liked the simple theme given in this link. The theme has label and a input text. I wanted to add a checkbox as well at the beginning of the line. Somehow adding a checkbox inside the div makes the arrangement awry.
Though its better to look at the code in the link, I am providing a snapshot here:
HTML
<form>
<div>
<!--NEED TO ADD CHECKBOX HERE -->
<label for="pub_url">Public URL</label>
<input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>
</form>
CSS3
/* Onto the styling now. Some quick generic styles first. */
html, body {
width: 100%; height: 100%;
}
body {
font-size: 76%;
font-family: Verdana;
background: #eee;
padding: 50px 0;
}
form {
background: #fafafa;
padding: 20px;
width: 400px;
margin: 0 auto;
border: 1px solid #ffe2e3;
}
form div {
/* Float containment */
overflow: hidden;
}
/* Things are looking good now, onto the main input field
styling now! */
/*
Lets change the box model to make the label and input
contain into the 100% div.
You might want to specify the box sizing properties inside
`* {}` at the top.
Things are looking great now! Lets just spice it up a bit.
*/
form label, form input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form label {
font-weight: bold;
background: linear-gradient(#f1f1f1, #e2e2e2);
padding: 5px 10px;
color: #444;
border: 1px solid #d4d4d4;
/* lets remove the right border */
border-right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 1.5em;
width: 30%;
/* takes the width properly now and also the
spacing between the label and input field got removed. */
float: left;
text-align: center;
cursor: pointer;
}
/* The label is looking good now. Onto the input field! */
/*
Everything is broken now! But we can fix it. Lets see how.
*/
form input {
width: 70%;
padding: 5px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 5px;
border-top-right-radius: 4px;
line-height: 1.5em;
float: right;
/* some box shadow sauce :D */
box-shadow: inset 0px 2px 2px #ececec;
}
form input:focus {
/* No outline on focus */
outline: 0;
/* a darker border ? */
border: 1px solid #bbb;
}
/* Super! */
p.s: It will be delightful if someone can stylize the checkbox in the same way as the example
try this one,
form input[type="checkbox"] {
width:20px;
}
<div>
<input type="checkbox" >
<label for="pub_url">Public URL</label>
<input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>
http://jsfiddle.net/KW6AY/1/
Here you go \w quick styling:
http://codepen.io/daniesy/pen/puema
alter the css to input[type="text"] and lower the width to around 60% (so it won't affect your checkbox), add a checkbox with a float left
just rename class
form input into form input[type="text"]
Good luck.
I'm trying to setup a clean CSS to style a button to visually looks merged with the near input field.
I'm using this CSS currently:
button {
position: relative;
left: -4px;
box-sizing: border-box;
padding: 0 10px;
margin: 0;
font-size: 17px;
border: 1px solid gray;
border-radius: 0 3px 3px 0;
}
http://jsfiddle.net/GRwqL/
The main problem is the usage of the left property, I don't think it's a good practice, mostly because it's not handled correctly on all browsers.
The other problem is that this code in Internet Explorer and Firefox makes the button not high as the input field.
So I was looking for some help to write a better code cross-browser and cleaner.
Personally I don't care if is needed a wrapper element or any other HTML element, I just need a clean code, cross browser and that works well.
<span class="inputWithButton">
<input type="text"><button>Submit</button>
</span>
input, button{outline: none;}
.inputWithButton{
display:inline-block;
overflow:hidden;
border:1px solid gray;
border-radius: 3px;
}
.inputWithButton > *{
vertical-align:top;
border:0;
margin:0;
padding: 3px 10px;
}
.inputWithButton > input[type=text]{
width:150px;
}
.inputWithButton > button{
border-left:1px solid gray;
background:#eee;
cursor:pointer;
width:70px;
}
.inputWithButton > button::-moz-focus-inner {
border: 0;
}
DEMO with higher paddings and different borders colors : http://jsbin.com/OPiroyib/4/edit
(Just remove border from the span and add border to both input and button) That easy.
You need to override the default margin on the input element too.
jsFiddle example
input, button {
margin:0;
}
In doing so, there will no longer be space between the elements, assuming there is also no space between them in the markup. Note, that inline elements respect the whitespace in the markup.
For instance, even after resetting the default margin there is space between the elements, if there is space between them in the markup (example)
For your second problem (making the elements the same height), do the following:
input, button {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding:0;
margin:0;
vertical-align:top;
line-height:30px;
height:30px;
}
Basically, use box-sizing to change the box model, again reset the margin/padding, use vertical-align:top for alignment issues, and then set an equal line-height/height on both elements.
jsFiddle example
Take a look at css-reset or normalize.css to set the defaults in all browsers to "null".
Also css frameworks like bootstrap are very cool!
Have you thought about using a simple span tag instead of a button and then attach an onclick event to it?
The following seems to work ok for me - though you might need to use a reset / modenizer style sheet to make it more predictable on different browsers.
http://jsfiddle.net/GRwqL/13/
<input class="nospace"></input><span class="nospace">Submit</span>
.nospace {
margin: 0;
padding: 0;
}
span.nospace {
height: 1em;
margin: 0;
padding: 1px;
border: 1px solid black;
}
it's possible to make it like this when you onfocus (onclick) on the input text. Any help would be appreciated.
You can make use of outline and :focus, these are compatible with major browsers.
HTML
<input type="text" class="inp" />
<br>
<input type="text" class="inp" />
CSS
.inp{
border:solid 2px gray;
margin: 20px 5px;
outline:solid 10px silver;
}
.inp:focus{
outline:solid 10px red;
}
Preview on JSFiddle
You can do it like this :
input:focus
{
background-color:blue;//*
}
*this is just a example to change the background color.Do any thing that u desire here
Take look at complete example here.
You can wrap the input with an anchor tag, and set it to change background-color onfocus:
<a class='focused'><input /></a>
with CSS:
.focused:hover{
background-color:blue;
}
or, if you want it to change when the input is active, you need to use javascript/jQuery.
I think you would have to wrap each input in a div and give that div a background color when it has focus using JavaScript. Here's a version in jQuery...
$(document).ready(function() {
$('input').on('focus', function() {
$(this).parent().css('background-color', 'blue');
});
});
I think this CSS trick can be used rarely in real cases, but it is funny, that we can make this effect with box-shadows.
http://jsfiddle.net/XSpwg/
HTML:
<div>
<form>
<input></input>
<input></input>
<input></input>
</form>
</div>
CSS:
div {
background-color: lightgrey;
width: 80%;
max-width: 400px;
overflow: hidden;
padding: 5px;
}
input {
margin: 2em 0.5em;
display: block;
border: solid 2px lightblue;
outline: none;
height: 16px;
line-height: 16px;
font-size: 12px;
}
input:focus {
box-shadow: 180px 227px 0 200px lightgrey,
180px 195px 0 200px blue;
}
Use pseudo-class selector for various effects.
There are two possible methods using CSS
Method 1 --> if you need both hover and on focus effect then use border styling for the <input> element
here is a typical HTML and CSS for method 1, --> Jsfiddle view
HTML
<form class="form-style">
<input class="input-style" type="text" name="some-name">
<input class="input-style" type="text" name="some-name">
</form>
CSS
.form-style
{
width: 250px;
margin:auto;
background-color: #d6d6d6;
display:block;
}
.input-style
{
width:200px;
margin:auto;
padding-left: 0px;
padding-right: 0px;
line-height: 2;
border-width: 20px 25px;
border-collapse: separate;
border-style: solid;
border-color: #d6d6d6;
display: block;
}
input.input-style:focus, input.input-style:hover
{
border-color: #3399FF;
}
Method 2 -> if you need just a hover effect then enclose the <input> element in a <div> and add :hover effect to it, or you can use the method 1 :hover and remove the :focus selector
here is a typical HTML and CSS for method 2, --> Jsfiddle view
HTML
<form class="form-style">
<div class="input-style">
<input type="text" name="some-name">
</div>
<div class="input-style">
<input type="text" name="some-name">
</div>
</form>
CSS
.form-style
{
width:250px;
margin:auto;
display:block;
}
.input-style
{
width: 200px;
background-color: #d6d6d6;
padding:20px 25px 20px 25px;
display: block;
}
.input-style input
{
width:inherit;
line-height: 2;
display: block;
}
.input-style:hover
{
background-color: #3399FF;
}
My advice -> just use on focus effect, because on hover will highlight the <input> on which the mouse is over even if you you are typing (on focus) in another <input>