This question already has answers here:
Styling input buttons for iPad and iPhone
(6 answers)
Closed 4 years ago.
I have simple CSS for styling a button: <input class="button" type="submit" value="Join">
...
.header__form-submit .button {
background: #3371E3;
border-radius: 0 5px 5px 0;
}
...
#media screen and (max-width: 767px) {
...
.header__form-submit .button {
width: 100%;
border-radius: 5px;
}
}
It renders fine on desktop, on any browser and on mobile preview in Chrome. However, when I open this on an iPhone the button has round corners.
Chrome preview:
iPhone either Chrome or Safari:
Why is this happening? Is there a problem with styling <input /> on iOS?
Thank you
disable default operating system styling
webkit-appearance: none;
Edit: add this to your css
input {
-webkit-border-radius:0;
border-radius:0;
}
As well as the above line.
The way to go is:
<button class="button" type="submit">Join</button>
Related
I am trying to build a static website with multiple checkboxes, but the CSS only works on chrome (using F12 to see how it displays on a mobile), there is a trouble displaying the website on my Iphone (the checkboxes doesn't follow display: inline-block)
Here is the code I used:
HTML
<div class="checkboxContainer">
<label><input type="checkbox" id="checkbox1">label1</label>
<label><input type="checkbox" id="checkbox2">label2</label>
</div>
CSS
#media (max-width: 700px) {
.checkboxContainer {
display: inline-block;
padding-top: 10px;
padding-left: 0;
padding-right: 0;
}
.checkboxContainer label {
white-space: nowrap;
}
}
How it looks on chrome using F12 displaying on iPhone XR:
How it looks on my iPhone:
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
This question already has an answer here:
Why css "all: unset" works weirdly in Safari browser for MacOS?
(1 answer)
Closed 2 years ago.
I can't set the text color of this button when using all: unset in Safari 13.1 on macOS 10.15. It seems to work fine on Chrome 80 and Firefox 74.
button {
all: unset;
color: white;
background-color: darkblue;
}
<button>button</button>
Desired: The word "button" should appear in white on a dark blue background.
Actual: In Safari (only?!) the word "button" appears black on a dark blue background, which is illegible.
What's going wrong here? Is this my fault? Is there a workaround?
This is a known bug in Safari. https://bugs.webkit.org/show_bug.cgi?id=158782 It's been open since 2016.
This is happening because the "all: unset" is setting -webkit-text-fill-color to black, and that overrides color.
You can work around it by setting -webkit-text-fill-color to the desired color. Hopefully they'll fix this bug someday!
button {
all: unset;
color: white;
-webkit-text-fill-color: white;
background-color: darkblue;
}
<button>button</button>
Interesting. The all: unset reset all the values to their inherited values.
If you want a workaround, all you need to do is wrapper it in an element with white text. The snippet below isn't ideal, but it should work in Safari.
button {
all: unset;
background-color: darkblue;
}
.button-wrapper {
color: white;
}
<div class="button-wrapper">
<button>button</button>
</div>
This question already has answers here:
How to apply specific CSS rules to Chrome only?
(13 answers)
Closed 5 months ago.
For some reason Chrome shows this span unusually higher than Firefox.
As a result, I wrote the following CSS:
#media screen and (-webkit-min-device-pixel-ratio: 0) {
.selector:not(*:root),
span.justForChrome {
display: block;
margin-top: 23%;
text-align: right;
}
}
The following is the HTML:
<li class="nav-item">
<a
class="nav-link"
data-toggle="tooltip"
title="Shopping cart"
id="{{ shoppingCart }}"
routerLink="/shopping-cart"
><span class="justForChrome"
>Shopping Cart<span id="counter">{{ counter }}</span></span
></a
>
</li>
While this is working in Chrome, now Firefox is showing the span to high. If I set the margin-top to 100% in Firefox developer tools, then it is perfect, but margin-top at 100% on Chrome sends the span upwards.
What can I do? I swear this was working a few weeks ago. I would expect that Firefox would not even find the span.justForChrome selector rule in the CSS
Migrating OP's solution from the question to an answer:
Whether it is the fact that I have to compile the Angular app, which
creates a new "bundled" stylesheet or if it is because I placed the
media queries at the end of the scss file, I do not know, but here are
the media queries that I used at the end of the scss file, which
worked:
#media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
.selector:not(*:root),
span.justForChrome {
display: block;
margin-top: 23%;
text-align: right;
}
}
#-moz-document url-prefix() {
span.justForChrome {
display: block;
margin-top: 94px !important;
text-align: right;
}
}
Currently the site is still in beta, but here is a screenshot:
Both the words "Shopping Cart" and the number are on the "baseline" of
the navbar.
I've tested the following code in Microsoft Edge 42.17134.1.0, Firefox 65.0 (64-bit), and Chrome Version 72.0.3626.81 (Official Build) (64-bit) and it works as expected in Chrome.
#media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.selector:not(*:root), .chrome {
color: green;
}
}
Note that .chrome is a class name and you can change with other class names.
Check the following JsFiddle or snippet:
.test {color:red;}
#media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.selector:not(*:root), .chrome {
color: green;
}
}
<p class="test chrome">I Should be Green if you're in chrome, Red in all other browsers</p>
This question already has answers here:
Text gets cut when using <select>
(4 answers)
Closed 12 months ago.
Drop down menu broken on Windows Chrome. Works perfectly fine on MAC Chrome and the letters aren't cut off. The problem:
The word, select, should be completely visible.
The CSS is basic:
.form-control {
height: 30px;
width: 50%;
padding: 8px 12px;
font-size: 13px;
}
With standard bootstrap.
height: 30px; is likely your issue.
A quick look at the default .form-control in my Chrome inspector shows the elements as being 34px high. You've made the .form-control elements too small to display the entirety of their contents.
In general, you should avoid explicitly setting the height of these.
I ran into this issue not long ago.
Removing the vertical padding is what set it to good in windows chrome for me. It didn't impact the display negatively in Mac Chrome for me either.
.form-control {
height: 30px;
width: 50%;
padding: 0px 12px;
font-size: 13px;
}