When input type is number Chrome renders input boxes different appearance, numbers in boxes are bottom trimmed. Is there any way to fix it without change size of input controls?
Any help would be appreciated.
See jsFiddle Link
Both text and number inputs renders with same appearance in Internet Explorer .
<div class="container">
<div class="small">
<input type="number" placeholder="Number" value="8" class="form-control input-xs">
<br/>
<input type="text" placeholder="Text" value="8" class="form-control input-xs">
</div>
</div>
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
.input-xs {
height: 22px;
padding: 5px 5px;
font-size: 10px;
line-height: 1.5;
border-radius: 3px;
}
The line-height of the input-xs class is messing with it.
If you take that away it looks ok. This has to be because not all browsers are supporting line-height inside input.
While Chrome and Safari respect line-height values on inputs,
Firefox, Internet Explorer, and Opera do not.
From here...
.input-xs {
height: 22px;
padding: 5px 5px;
font-size: 10px;
/*line-height: 1.5; or set to 'line-height: 1'*/
border-radius: 3px;
}
See Fiddle
Related
I would like the font size for my form label and input fields to scale down from 18px to 10px when the browser width reaches 1460px or less.
I read that it is not possible to get fonts to automatically 'scale down' as such when the browser width decreases, and that I would need to use media queries instead.
Therefore I have put a media query at the top of my style tags asking the font size for my label and input to display at 10px when the screen size is 1460px, but it doesn't seem to work. The rest of my code is working fine however, so it must be something to do with the way I am coding my media query.
If someone could offer some help that would be much appreciated.. my code is pasted below.
#media only screen and (max-width: 1460px) {
label input {
font-size: 10px;
}
}
* {
box-sizing: border-box;
}
input[type=text],
select {
width: 95%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
transition: 0.3s;
outline: none;
font-family: Typ1451-Medium;
font-size: 18px;
margin: 7px;
}
input[type=text]:focus {
border: 1.25px solid #ea0088;
}
label {
padding: 21px 12px 12px 12px;
margin-left: 5px;
display: inline-block;
font-family: Typ1451-Medium;
font-size: 18px;
color: #999;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 2.5% 20% 0 20%;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.left,
.right {
width: 50%;
}
form {
display: flex;
}
<div class="container">
<form action="signin.php" method="post">
<div class="left">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="* Please complete">
</div>
</div>
</div>
</form>
</div>
Your selector — label input — doesn't match any elements in your HTML.
None of your input elements are descendants of your label elements.
Perhaps you meant label, input to select label elements and input elements. If so, then it still wouldn't work because you define the input font-size with a more specific selector later on (and the most specific selector wins the cascade) and the label in a similar way (it doesn't have a more specific selector, but when selectors are equal, the last one wins the cascade).
Actually, you CAN scale fonts up or down with the viewport size. There is a method with calc() and vw units:
Basically you do something like font-size: 3vw and then set max and min font sizes.
Here is a link to the calculation on Smashing Magazine. The rest of the article is pretty interesting, too.
You can extend this even further and optimize the font size with media queries.
Have fun! :)
I’m having trouble keeping my search fields with the search image on one line. I have created a container area that i want centered in the middle of the screen, and I gave it a max-width of “580px” …
#loginArea {
border-radius: 25px;
font-family: 'russo_oneregular';
font-size: 20px;
padding: 20px;
background-color: #ffffff;
color: #000000;
display: table;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 580px;
}
Then I created my three search elements with the magnifying glass search icon …
<input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField" style="width:25%">
<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" style="width:25%">
<input type="text" name="event" id="event" placeholder="Event" class="searchField">
<input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" height="40" align="middle">
But I can’t get everything to stay on one line even if there are 580 pixels available on the screen. On both Mac Chrome and Firefox this looks off — https://jsfiddle.net/4sjxum1k/1/ . Even if you expand the viewing area to have way more than 580 pixels, things are still wrapping. I’m fine if things wrap when the screen area is small (e.g. mobile browsers), but if there is enough room, I’d like everything to display on one line.
Any help is appreciated, - Dave
You need to set all all the input elements to "display:inline-block;" and also apply a set percentage width (width: 25%;) to each of the input elements.
.searchField {
display: inline-block;
line-height: 40px;
font-size: 22px;
margin: 0;
vertical-align: middle;
padding: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: start;
width:25%;
}
See JSFiddle here:
https://jsfiddle.net/4sjxum1k/5/
Your items are too wide for your wrapping div.
You have multiple options, either increase the width of the containing box to something like 650px (for example) or reduce the width of the existing input fields.
Another idea would be to float all the form inputs to the left with a little margin-right value and float the submit item to the right. That would remove the default browser spacing on your elements. But adjustment to the widths are still necessary. Don't forget to add a clear fix after your <form>
I'm curious why I get different results on Chrome and Firefox with this simple code:
Breaks on Chrome
Works on both Firefox, IE and Chrome
The only difference is in HTML layout:
<div class="container">
<div class="form-wrapper">
<input class="email" type="text">
<button class="send pull-right">Send</button>
</div>
</div>
versus this:
<div class="container">
<div class="form-wrapper">
<input class="email" type="text"><button class="send pull-right">Send</button>
</div>
</div>
Any recommended fix without ugly hacks and HTML changes?
<input> isn't block elements by default. You must use float:left for them:
.form-wrapper {overflow:hidden;}
input.email, button.send{float:left}
Method 1:
/* CSS used here will be applied after bootstrap.css */
.form-wrapper {
background-color: #000;
padding: 10px;
font-size: 0; /*set font-size to zero*/
}
input.email {
background-color: #fff;
border: none;
height: 50px;
width: 70%;
padding-left: 15px;
padding-right: 15px;
font-size: 16px; /*reset font-size*/
}
button.send {
background-color: grey;
border: none;
height: 50px;
width: 30%;
font-size: 16px; /*reset font-size*/
}
working demo
Method 2:
Use float for inputs and clear the float using overflow:hidden to parent div.
demo
I have a Html/Css code that work fine in Chrome and firefox but in IE i can't show up the background for my label
i have two class css one for active lable and other for no active.
Here is my Css Code:
.jqTransformDayRadioWrapper label {
width: 31px !important;
height: 28px;
margin-right: 2px;
text-align: center;
font-weight: normal;
line-height: 28px;
cursor: pointer;
background: url('../img/form/day_radio_button.gif') no-repeat;
}
.jqTransformDayRadioWrapper label.active {
background: url('../img/form/day_radio_button_selected.gif') no-repeat !important;
}
And Here is the HTML code generate by Cakephp Html Helper Form :
<div class="jqTransformDayRadioWrapper">
<label for="EventReoccurringOnDay1">S</label>
<input name="data[Event][reoccurring_on_day1]" type="text" class="jqTransformDayRadioWrapper" value="0" id="EventReoccurringOnDay1" />
<label for="EventReoccurringOnDay5">T</label>
<input name="data[Event][reoccurring_on_day5]" type="text" checked="checked" class="jqTransformDayRadioWrapper" value="1" id="EventReoccurringOnDay5" />
</div>
</div>
Thanks in advance:).
You will need to set your label to display:block; because labels are inline elements. And without display:block; your background image will not appear in IE 7.
I am trying to make this for accessable for all browsers. Different browsers are giving different results (with IE the most problematic for me). I included screenshots so that you can see what I am talking about.
This is how the form looks in Safari, Firefox and Chrome:
http://imageshack.us/photo/my-images/210/bildschirmfoto20120226u.png/
This is how the form looks in IE6 and IE7:
http://imageshack.us/photo/my-images/37/bildschirmfoto20120226u.png/
And this is IE8 and IE9:
http://imageshack.us/photo/my-images/39/bildschirmfoto20120226u.png/
HTML
<form method="post" action="?test" id="form">
<label for="user">USERNAME</label>
<input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
<div id="empty-user" class="fail">This stuff will get replaced by the title contents.</div>
<label for="password" class="clear">PASSWORD</label>
<input type="password" name="password" id="password" maxlength="100" title="Please enter your password." data-h5-errorid="empty-password" tabindex="2" required />
<div id="empty-password" class="fail">This stuff will get replaced by the title contents.</div>
</form>
CSS
label {
background: yellow;
font-size: 12px;
font-weight: bold;
width: 100px;
float: left;
margin-right: 50px;
text-align: right;
cursor: pointer;
}
input {
height: 30px;
background-color: #fafafa;
border: 1px solid #abaaaa;
width: 300px;
margin: 5px 0 5px 0;
float: right;
}
Now my question is, how can I align the labels so they are vertically aligned with the input fields? I've used the search here and most of the time something like
vertical-align: middle;
is recommended, but this isn't working at all. The only fix for Safari, Chrome and Firefox is adding a margin-top or padding-top to the labels, but this destroys the form in IE8 and IE9.
What can I do about this issue? Dropping the height on the input field is not an option for me.
put a clear:both after the input tag (somewhere).
I would suggest you add more markup to your forms for extra customization. Typically I like to do forms like this:
<div class="field">
<label for="user">USERNAME</label>
<div class="field-subject">
<input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
</div>
</div>
.field {
overflow: auto; /* this "clears" the floated elements */
margin-bottom: 10px;
}
.field label {
float: left;
width: 200px;
}
.field .field-subject {
float: left;
width: 500px;
}