Since it's a private project which should work on iPads only, I don't care that much about design in other browsers than Safari.
I'm currently trying to create an input field for dates. It works so far, but I absolutely have no clue where the spacing (marked with red line) comes from. Other input fields like texts above and below, doesnt have this spacing. I also tried to add/remove padding and margin, but it doesn't seem to work and I just want to use type="date" because of the datepicker in iOS Safari.
Do you have an idea?
<div class="any-class-i-want">
<span class="text-very-small">A random text on the left side</span>
<input type="date" class="text-right" value="">
</div>
input {
display: block;
height: 100%;
text-align: left;
width: 100%;
border: none;
font-size: 0.8em;
margin: 0;
padding: 0 #row-space / 2;
background-color: #ABC;
//-moz-appearance: textfield;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
margin-right: 50px;
padding: 0;
}
&:focus {
outline: none !important;
}
}
Thank you very much, I really appreciate your support!
Related
On my website people somehow cannot write in the inputs when they use Safari. The problem is only present in safari.
(http://www.rootshybrid.dk/blivfrivillig/)
From other threads I've seen the solution being the user-select code. I have tried adding both webkit-user-select: auto; and webkit-user-select: text; to the css of the input fields, but it still doesn't work.
Anyone have a solution to my problem?
The combination input padding on line 40 of main.css
input, select, textarea {
border-radius: 6px;
border: 1px solid #d0d0d0;
outline: 0;
font-family: Roboto;
padding: 15px 10px; /*<<<<<<<*/
font-size: 15px;
webkit-user-select: auto;
}
Is not working with the height on line 55 and 80 of main.css
.whitebox input[type="text"] {
height: 20px;
}
Just add a hollow class to the <p> value
for example
<p class="abc">
<label class="stdlabel">Fornavn *</label>
<input type="text" name="firstname" value="">
</p>
Because it seems that the problem occurs for those input labels only
HTML
<form action="/login">
...
<label for="password">Password</label>
<input type="password" id="password" name="pw">
<br>
<button>Log in</button>
</form>
CSS
* {
margin: 0;
padding: 0;
}
label {
display: inline-block;
width: 60px;
height: 20px;
text-align: left;
font: 12px/20px Arial;
}
input {
box-sizing: border-box;
width: 200px;
height: 20px;
border: 1px solid #ddd;
margin-bottom: 20px;
}
What made me feel puzzled is the input's padding. Because I wrote these rules above
/*
to reset margins and paddings in the user agent stylesheet, which is expensive, but I did it just for testing.
*/
* {
margin: 0;
padding: 0;
}
/*
In my opinion, the following rules will result in a 198*18 content box with a 1px border surrounding it.
While it didn't.
*/
box-sizing: border-box;
width: 200px;
height: 20px;
border: 1px solid #ddd;
The result is the input has 1px paddings, top and bottom. The snapshots is at the footer of the question. The universal selector didn't reset the padding for input elements.
What's the reason? Looking forward to the reply.
Snapshots: [removed]
Hello, everyone. Sorry for the inconvenience. I finally found what's wrong with it. It has nothing to do with the code piece I cut off. Here is the pivotal snapshot. So what the hell is \u200b?
\u200b
To be honest, I should found the mistake earlier, because the universal selector rule didn't appear on the right panel. It's my fault.
You have a zero width space character in your selector.
This renders the selector invalid, so it doesn't match anything, but is really hard to see in an editor.
I have a textbox and when I enter the term "laptop" its not visible properly. The problem is in IE9, not with Chrome.
HTML
<input id="small_search_string_sub" name="search_string" type="text" class="newsearch_sub rounded " placeholder="Search..." maxlength="500">
Here is the CSS:-
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
}
It seems like you have no reset for the input default style, also the input has not format for the text on it, also the padding might be pushing down the text to far.
I tried this, and it seems to work well on IE9 for me, but the fact that I see another class (rounded) on the line of code that you send, makes me wonder if there is not something missing here, can you put a link to the code, even as a stand alone page, this way I can debug on ie9 on the proper code, and maybe give you a solution if this one does not work for you.
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
font:12px/24px Arial,Helvetica
}
I have a contact form that I'm styling at the moment. I simply want the outline of the form to change to red when active and nothing to happen when hovered over.
I have this working in all browsers apart from Internet Explorer. I'm using Internet Explorer 11 on Windows 7.
In IE, at the moment there is a default hover which I can't figure out and when clicking in the input element, the outline-color doesn't change.
Another issue is that I have applied padding-left inside the input so that both the placeholder and user's text aren't touching the edge. For some reason, this has pushed the entire input to be wider than it should. It does have max-width: 100% applied to it. The div that contains the form has padding on the sides and now the input is pushing into the padding. This occurs in all browsers.
Here is basic example: http://jsfiddle.net/Forresty/fr7Lz2wj/1/
Here is the code:
HTML:
<div id="contactForm">
<input type="text" name="name" id="name" placeholder="Your Name" required maxlength="65" tabindex="1">
</div>
SCSS:
#contactForm{
box-sizing: border-box;
width: 100%;
max-width: 64em;
margin: 0 auto;
padding: 0 1.25em;
}
input {
width: 100%;
height: 3em;
padding-left: 1em;
&:focus {
outline-color: red;
}
&:hover {
outline-color: none;
}
}
Any help with this would be highly appreciated.
Thanks.
To avoid the input field to go over either you apply a percentage padding (ie. 1.5% ) and set input width at 100% minus 1.5% (98.5%) or you have to use css box-sizing:border-box on the input itself.
To have outline on focus you have to specify an outline-style.
input {
width: 100%;
height: 3em;
padding-left: 1em;
box-sizing: border-box;
&:focus {
outline-style: dotted;
outline-color: red;
}
}
http://jsfiddle.net/fr7Lz2wj/5/
I have a very little but hard (for me) problem to solve.
I have a text input, and a submit button. I need them to be the exact same height and for this to be true across Chrome and Firefox, ideally internet explorer also.
HTML
<input type="text" name="email" /><input type="submit" value="»" />
CSS
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 9px;
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
}
I've setup this basic code on a jsfiddle here.
You should notice if you load it in chrome, the button is less height than the text input and in firefox, its larger.
What am I missing?
Remove/add line-height: 18px; for both.
Vertical padding of the submit button has no effect. This seems to be a webkit bug. You can solve the problem by specifying explit heights and increasing the height of the submit button by the top and bottom padding of the input field.
input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}
The problem is your padding that is applying wrong to your button.
Trying solving it like this.
input[type=submit], input[type=text] {
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
height: 30px; /* or whatever height necessary */
}
Additionally, you can keep the padding left and right on your button like this.
input[type=submit] {
background: #000;
color: #fff;
padding: 0px 9px;
}
input {
height: 19px;
}
This maybe?
Also, remove the padding property.
http://jsfiddle.net/xkeshav/e6aTd/1/
Maybe it's the padding that is making problems. Try removing the padding, setting the button to a fixed height and make the offset with line-height.
You need to remove the height and work on the actual height of the input text field just by padding/font-size
jsfiddle
Removing/adding line-height: 18px; for both is not a perfect solution because I see a little difference height in firefox...
The best solution I found is to put a div arround and set its style to display: flex.
All is perfect this way.
body {
background: #ccc;
}
div{
display: flex;
}
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 5px;
font-size: 25px;
border: 0;
margin: 0;
}
<div><input type="text" name="email" /><input type="submit" value="»" /></div>
TRY
body {
background-color: #ccc;
}
input[type=text] {
width: 218px;
}
Working DEMO