/    Sign up×
Community /Pin to ProfileBookmark

Form button styling not working on phone

Hello. I still have a lot to learn about html and css, but I’m working on a website and I’m wondering why the blue send button on this page: https://juliecarroll.net/contact.html looks fine on a desktop computer but doesn’t show on my phone. I’d appreciate any help. Thanks!

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumAug 10.2019 — On my phone (Android S4) the button looks fine. However the hover effect is not visible as on a touch device there is no hover. Some days ago I learned that some mobile browsers simulate the hover effect: On single tap the hover effect shows up and on tap outside the element it disappears. However this is not applicable for the submit button as tapping it will submit the form.
Copy linkTweet thisAlerts:
@prowriterauthorAug 10.2019 — @Sempervivum#1607433 Thanks for the response. That's interesting. I have an iPhone, and the blue button I made doesn't show up, but there's a default send button in its place. When I tap on it, I see my blue button for a couple of seconds before the form is submitted. I wonder if there's some way to fix it so the blue button shows up on iPhones.
Copy linkTweet thisAlerts:
@SempervivumAug 10.2019 — Try the fix given here:

https://stackoverflow.com/questions/5438567/css-submit-button-weird-rendering-on-ipad-iphone
Copy linkTweet thisAlerts:
@prowriterauthorAug 10.2019 — @Sempervivum#1607447 I saw that too, but it didn't work for me. Here's what I have for the button now:

.feedback-input {

color:#3c3c3c;

font-family: Helvetica, Arial, sans-serif;

font-weight:500;

font-size: 18px;

border-radius: 0;

line-height: 22px;

background-color: #fff;

padding: 13px 13px 13px 54px;

margin-bottom: 10px;

width:100%;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

-moz-appearance: none;

-webkit-appearance: none;

box-sizing: border-box;

border: 3px solid rgba(0,0,0,0);

}
Copy linkTweet thisAlerts:
@prowriterauthorAug 11.2019 — The solution was to change <input type="submit" value="SEND" id="button-blue"/> to <button type="submit" id="button-blue"/>SEND</button>.
×

Success!

Help @prowriter spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...