confused and dazed Posted February 23, 2013 Share Posted February 23, 2013 Hello Internet!!! I am back for more questions and I continue to be confused and dazed. Here is the code for my button styles and they do not work with Safari browsers (i.e. iphones ipads, etc...) They seem to default to a rounded button that is gray. The text color appears to be ok with the button should have a background color and should be square. ***this code is in the <head><style type="text/css">.btnmain {background-color:#993300; color:#CC9966; width:258px; height:30px;}.btnmain:hover {color:Black; background: #CC9966; font-style: italic}.centerbtn {background-color:#993300; color:#CC9966; width:274px; height:33px;}.centerbtn:hover {color:Black; background: #CC9966; font-style: italic}</style>***this code is in the <body><input type="button" class="btnmain" style="font-weight: bold; font-family: Century; font-size: 12pt; margin-left: 0px;" value="item1" onclick="Senditem1();"> Link to comment Share on other sites More sharing options...
sayed2x2 Posted February 24, 2013 Share Posted February 24, 2013 I tried that in safari and its showing the same, there doesnt seem to be any problem. probably you would need to delete you cookies.screenShot: http://ammasbiryani.com/wp-content/uploads/2013/02/button.png Link to comment Share on other sites More sharing options...
confused and dazed Posted February 24, 2013 Author Share Posted February 24, 2013 Thanks for responding to my post.Thats strange because a couple folks (including myself) have told me (the browsers on their iphones and ipads) that the buttons are rounded grey buttons. Could it be something else? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 24, 2013 Share Posted February 24, 2013 I think you will find that ipad etc, use their own form of stying of some inputs, you might to use !important to give your stying higher precedence over these. Link to comment Share on other sites More sharing options...
confused and dazed Posted February 24, 2013 Author Share Posted February 24, 2013 dsonesuk - Thanks for responding (as usual!) How might I go about placing my styles precedence over the default ones ipad uses? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 24, 2013 Share Posted February 24, 2013 google 'safari ipad input button styles' Link to comment Share on other sites More sharing options...
confused and dazed Posted February 24, 2013 Author Share Posted February 24, 2013 Thanks again for responding to my post.I took a look with google and I found two sets of codes that claim to work. I guess I am not integrating the code properly to make either of them work. Can anyone help? OPTION1input, textarea { -webkit-appearance: none; -webkit-border-radius: 0;} OPTION2input[type=submit] { -webkit-border-radius:0px;} Link to comment Share on other sites More sharing options...
confused and dazed Posted February 24, 2013 Author Share Posted February 24, 2013 I ended up putting the code within the style quotes in the input tag. It worked. Guess I should have done that first. Issue solved! <input type="button" class="btnmain" style="-webkit-appearance: none; -webkit-border-radius: 0; font-weight: bold; font-family: Century; font-size: 12pt; margin-left: 0px;" value="item1" onclick="Senditem1();"> Link to comment Share on other sites More sharing options...
dsonesuk Posted February 25, 2013 Share Posted February 25, 2013 The first should have worked? are you using jquery-mobile, with jquery-mobile-css? these do change styles for mobile devices to those within mobile-css. try this input {-webkit-appearance: none !important; -webkit-border-radius !important: 0; font-weight: bold; font-family: Century; font-size: 12pt; margin-left: 0px;} The second option will only target inputs of type submit, NOT button. Link to comment Share on other sites More sharing options...
confused and dazed Posted February 25, 2013 Author Share Posted February 25, 2013 dsonesukOn option#2 understood. On option#1 - I'm still a little confused where to apply that code. If I simply put that line of code in the <body> it ends up displaying those actual words in the browser and not a button at all. If i put that text within tags <input {-webkit-appearance........etc..... it does not render the buttons like I want them - it still defaults to what iphones want them to be... Please explain how and where to apply the code you suggested. Also I actually dont know what you mean by "jquery-mobile, with jquery-mobile-css" I am not using the command jquery anywhere in my code. Please explain what you mean by this statement. I would certainly appreciate it.Thanks as always Last question - do you like my anxiety face? It really fits how I feel most of the time!!! Link to comment Share on other sites More sharing options...
dsonesuk Posted February 26, 2013 Share Posted February 26, 2013 (edited) Between head tags <head><style type="text/css">input {-webkit-appearance: none !important; -webkit-border-radius !important: 0; font-weight: bold; font-family: Century; font-size: 12pt; margin-left: 0px;}</style></head> Jquery-mobile is specific for mobiles, for swipe etc, it tends to convert inputs to style that matches styling by applying class, then the styling is applied by css to that class using jquery mobile css style sheet. Edited February 26, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
confused and dazed Posted February 26, 2013 Author Share Posted February 26, 2013 dsonesuk - Thanks.Much to learn. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now