I have a checkbox in my angular app. when the value is checked, the box is filled with the value in google-chrome. in firefox it is displaying only on top corner instead of filling the input field. How can i resolve this. please guide me.
HTML
<input class="customInput" id="custom" type="checkbox" formControlName="test" readonly>
css
.customInput {
width: 100%;
min-height: 70px;
border: none !important;
text-align: center;
font-size: 50px;
background: transparent;
}
// fully checked in chrome
// uncompatable firefox
Browsers react very differently,
In Chrome broswer it shows perfectly,
But in Firefox 57 shows,
More info : Visit styling checkbox in different browser
Related
I've set a font-size on all of my input elements and also a line-height of 1.25. For some reason, on mobile web (currently trying with Android Chrome) the blinking cursor is much shorter than the text itself, and results in the text getting cut in the middle when the user is actively entering input. The actual text itself ends up being fine after the user exits the input (doesn't get cut off). How can I make sure that the cursor matches the real size of the text? I attached a picture for reference.
On desktop web browsers (Windows, Mac + Chrome, Safari, Firefox) it's totally fine and I don't experience this issue, although apparently on Firefox Linux the same issue pops up.
Code so far:
.input-class {
background-color: #eeeeee;
border-color: transparent;
border-radius: 10px;
box-sizing: border-box;
padding-left: 0.5rem;
line-height: 1.25 !important;
vertical-align: middle;
width: 100%;
}
.input-class::placeholder {
overflow: visible;
}
.input-class:focus {
outline: none;
}
input {
box-sizing: content-box;
font-size: 1rem;
padding: 0.5rem;
}
<input type="text" class="input-class">
Any comments are appreciated!
I found the issue after doing Remote Debugging with Chrome - highly recommend this in the future if you're also facing some similar issues on mobile. The custom font that I was using was not playing nicely with inputs and textareas on Chrome. I switched to a more common font and the issue went away.
input[type="submit"] buttons on Chrome and Safari seem to only respect a line-height property when combined with a border property.
Looking at the computed line-height value in Chrome's debugger shows the button with border having the expected computed value, whereas the button without the border has line-height: normal.
Firefox shows both versions respecting the line-height property. Chrome and Safari do not.
As an added bonus, changing the elements from input[type="submit"] to button makes them work as expected.
Any ideas why this is happening?
CSS
.border { line-height: 3rem; border: solid 1px black; }
.noborder { line-height: 3rem; }
HTML
<input type="submit" class="border" value="input[type='submit'] with border" />
<input type="submit" class="noborder" value="input[type='submit'] without border" />
Screenshot
Browsers Tested
Firefox 73.0 - Works as expected.
Google Chrome 80.0.3987.106 - Unexpected results.
Safari 13.0.5 - Unexpected results.
you can also use vertical-align: middle; instead of line-height.
I've placed an image as the background for a checkbox. Everything works fine in chrome but when I use Firefox 32.0.3 firefox does not recognize the background image. Is there something I'm missing that's causing firefox to not add in the background image?
CSS
input[type=checkbox]:before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background-image: url('http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg');
background-size: 12px;
top: 2px;
position: absolute;
opacity:0.4;
}
HTML
<input type="checkbox" id="chk1" />
Fiddle here.
I solved this by going through a different approach. I created a span tag and with AngularJS (already in my app) I used a ng-class to display the background image to the span tag based on if the checkbox was marked or not.
I was testing the three-state radio button i've created.
The code is too long to post over here... Link to code: codepen
input {
cursor: pointer;
width: 4rem;
height: 4rem;
position: absolute;
margin: 0;
padding: 0;
opacity: 0;
z-index: 1;
}
As you can see, i've created three radio buttons: each of them is a square of a given size, and absolute positioned. In this way the user can click/tap any part of the control, and the toggle should move accordingly. This works well on desktop devices.
On mobile, it works well on IE shipped with windows phone 8 devices, works good on Chrome for Android, but it's not working on Firefox for Android. If you change the input's opacity to 1, you'll see Firefox is going to apply the browser-default size to these controls, making impossible to these controls to cover the part they are assigned...
I'm testing it with CyanogenMod 11.0 (based on Android 4.4.4) on the Oneplus One.
Is it a bug? Is there a way to fix it?
You should style the <label> instead of the input.
The label will select the radiobox you need. And your radiobox will be hidden.
html
<input type="radio" id="yes" />
<label for="yes">Yes</label>
css
input {
visibility: hidden;
}
label {
display: inline-block;
height: 30px;
width: 50px;
}
I want to use HTML input type="number" on a mobile application, in order to indicate to the smarter mobile phones (Android, iPhone and some others), that the numeric keyboard is more interesting for the user than the normal one. This works nicely.
So, I have this piece of HTML here:
<h3>type="number"</h3>
<input type="number" class="input-number"/>
<h3>type="text"</h3>
<input type="text" class="input-text"/>
The important CSS elements applied here are:
input {
height: 2em;
padding: 0.2em 0.5em;
width: 100%;
/* avoid iPhone rounded corners */
border: 1px solid #afb7c1;
border-collapse: collapse;
border-radius: 0 0 0 0;
}
.input-number {
text-align: right;
}
Which should render like this:
The above is a screenshot taken from iOS 4.1, where the world was still OK. Also on Android phones, everything works fine. But check out what happens on iOS 4.2, 4.3:
All of a sudden, the number field is a bit less wide, almost as though the iPhone wants to make room for that useless spinner that appears on some browsers when the input has type="number".
Is anyone aware of such an issue? How did you fix it? Or work around it? Is there any other way to make mobiles prefer the numeric keyboard? Or is there some proprietary css style that I can apply to undo this additional right margin?
Actually the questioner himself is very close to the answer as he knows it is the spinner 's fault, and luckily webkit allow users to control it by CSS:
input[type="number"]::-webkit-outer-spin-button { display: none; }
Source: REMOVE SPIN CONTROL ON INPUT TYPE=NUMBER IN WEBKIT
Live demo: http://jsbin.com/aviram/5/
Hope it help.
While vincicat's solution (previously accepted with the bounty) seemed to work at first, it revealed yet another rendering flaw in the Webkit browser. In 2 out of 10 page refreshes, the input was rendered with zero width, when put in a <td> and styled with width: 100%...
A better solution (for my use-case) was found here:
Disable webkit's spin buttons on input type="number"?
It consists of these CSS styles:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Interesting addition: I've found the <input type="number"/> field very badly flawed in Blackberry's WebKit browsers. It seems to be the source of browser crashes. Having said this, we're not using that HTML 5 feature any longer...
Not sure if this helps, but try to add these lines to the input css
-webkit-box-sizing: border-box;
box-sizing: border-box;
I don't have access to the older iOS devices to test it but this works on modern iOS and at the same time Google Chrome has started to disobey width: as well, so this fixes both:
input[type=number] {
max-inline-size: none; /* chrome 71 */
max-width: unset; min-width: unset; /* iOS12 */
}