Skip to content

Commit a997790

Browse files
maximedegrevejonrohansimurai
authored
Fix for disabled Safari inputs (#1707)
* Fix for disabled Safari inputs * Create lovely-rabbits-fly.md * Fix linter warning * Update src/forms/form-control.scss Co-authored-by: simurai <[email protected]> Co-authored-by: Jon Rohan <[email protected]> Co-authored-by: simurai <[email protected]>
1 parent af5a3ae commit a997790

File tree

2 files changed

+20
-7
lines changed

2 files changed

+20
-7
lines changed

.changeset/lovely-rabbits-fly.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
Fix for disabled Safari inputs

src/forms/form-control.scss

+15-7
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ label {
4343
color: var(--color-primer-fg-disabled);
4444
background-color: var(--color-input-disabled-bg);
4545
border-color: var(--color-border-default);
46+
-webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
47+
opacity: 1; // Fix for Safari iOS
4648

4749
&::placeholder {
4850
color: var(--color-primer-fg-disabled);
@@ -69,7 +71,9 @@ textarea.form-control {
6971
.input-contrast {
7072
background-color: var(--color-canvas-inset);
7173

72-
&:focus { background-color: var(--color-canvas-default); }
74+
&:focus {
75+
background-color: var(--color-canvas-default);
76+
}
7377
}
7478

7579
// Custom styling for HTML5 validation bubbles (WebKit only)
@@ -139,8 +143,8 @@ textarea.form-control {
139143
}
140144
}
141145

142-
input[type=checkbox],
143-
input[type=radio] {
146+
input[type='checkbox'],
147+
input[type='radio'] {
144148
float: left;
145149
// stylelint-disable-next-line primer/spacing
146150
margin: 5px 0 0 -20px;
@@ -164,7 +168,7 @@ textarea.form-control {
164168
&:checked {
165169
// child of sibling or sibling
166170
~ * .form-checkbox-details,
167-
~ .form-checkbox-details { // eslint-disable selector-combinator-space-before
171+
~ .form-checkbox-details {
168172
display: block;
169173
}
170174
}
@@ -206,8 +210,10 @@ textarea.form-control {
206210
margin: 28px 25px 0 -20px;
207211
}
208212

209-
// stylelint-disable-next-line primer/spacing
210-
.form-select { margin-top: 5px; }
213+
.form-select {
214+
// stylelint-disable-next-line primer/spacing
215+
margin-top: 5px;
216+
}
211217
}
212218

213219
// Hide the up/down buttons in <input type="number"> in the login form, the
@@ -249,5 +255,7 @@ input::-webkit-inner-spin-button {
249255
line-height: $lh-default;
250256
}
251257

252-
a { font-weight: $font-weight-bold; }
258+
a {
259+
font-weight: $font-weight-bold;
260+
}
253261
}

0 commit comments

Comments
 (0)