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
Related
Hello I want to set the light gray outline outside gray border line just like in the following image.either there is a border position set or blur effect the input text.
Please tell me how can I fix this issue? I am doing all of this in css.
.container {
background-color: aquamarine;
width: 100%;
height: auto;
}
input[type="text"],
textarea,
textarea.form-control {
background-color: #efeeef;
width: 396px;
height: 48px;
border-radius: 4px;
border: 3px solid #cecece;
}
textarea.form-control {
line-height: 50%;
font-size: 16px;
color: red;
font-weight: 500;
}
<div class="container">
<!--Form element-->
<form>
<fieldset>
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control textarea border-color outline" id="form-email">
</fieldset>
</form>
</div>
When I am using shade effects it is also useless.Is there any way to set the position of the border in this input area.
Borders cannot be set to blur (at least directly). If you are using some sort of CSS library, say Bootstrap then it may be adding box-shadow to the input elements.
Setting the box-shadow: none; on the required input should solve the problem.
I am not a expert but try
form{
border: 1px(thickness) outset(type of border) grey(color)
}
for more information go to this link:
https://www.w3schools.com/css/css_border.asp
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!
I am using box for token code purpose but input text alignment is coming different in different browser.
In Chrome:
In Internet Explorer:
My code for input text and for box is below:
<style>
input.box {
height: 9px;
padding: 3px 3px 8px;
border: 1px solid #999;
width: 145px;
padding-top: 4px;
}
</style>
<input path="token" id="token" tabindex="2" maxlength="35" class="box"
placeholder="token" />
we can see the bottom space is more in Chrome compare to Internet Explorer in the box.
Please let me know, how to fix this?
You can edit the CSS like this answer:
input.box {
height: 15px;
padding: 5px;
border: 1px solid #999;
width: 145px;
vertical-align: middle;
display: inline-block
}
<input path="token" id="token" tabindex="2" maxlength="35" class="box" placeholder="token" />
Since <input> Elements, or form elements in general, depending on the browser itself, it is up to the browser (and the operating system), how they look. So for example padding is supported by Chrome and Firefox on Windows, but the IE does not support it.
As a workaround, you could add a line-height, look at the example below:
input.box {
height: 9px;
padding: 3px 3px 8px;
border: 1px solid #999;
width: 145px;
padding-top: 4px;
line-height: 8px;
}
<input path="token" id="token" tabindex="2" maxlength="35" class="box"
placeholder="token" />
Assuming you mean you can use the line-height CSS property to do this. Simply set it to be the same as the height of the element.
Use line-height instead of padding for the IE.
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.
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.