I'm using CSS to style the input buttons on my website, but on IOS devices the styling is replaced by Mac's default buttons. Is there a way to style buttons for iOS, or a way to maybe make a hyperlink that behaves like a submit button?
You may be looking for
-webkit-appearance: none;
Safari CSS notes on -webkit-appearance
Mozilla Developer Network's -moz-appearance
Please add this css code
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
I recently came across this problem myself.
<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->
Hope that helps.
Use the below css
input[type="submit"] {
font-size: 20px;
background: pink;
border: none;
padding: 10px 20px;
}
.flat-btn {
-webkit-appearance: none; /*For Chrome*/
-moz-appearance: none;/*For Mozilla*/
appearance: none;
border-radius: 0;
}
h2 {
margin: 25px 0 10px;
font-size: 20px;
}
<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />
<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />
I had the same issue today using primefaces (primeng) and angular 7.
Add the following to your style.css
p-button {
-webkit-appearance: none !important;
}
i am also using a bit of bootstrap which has a reboot.css, that overrides it with (thats why i had to add !important)
button {
-webkit-appearance: button;
}
-webkit-appearance: none;
Note : use bootstrap to style a button.Its common for responsive.
Related
In Ionic 4, I know that for some things I'm supposed to use shadow dom, and modify components like this:
ion-button {
--ion-font-family: 'Montserrat', sans-serif;
--border-radius: 8px;
}
But what if I want to change the font weight of the button?
If you look at the css for the button, you'll see that there's no shadowdom css variable for weight like there is for padding or font-family:
.sc-ion-buttons-md-s ion-button {
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 8px;
--padding-end: 8px;
--box-shadow: none;
height: 32px;
font-size: 14px;
font-weight: 500;
}
The only way I can do it as far as I can tell is to do inline styling like this:
<ion-button color="primary" fill="solid" shape="round">
<p class="ion-padding-horizontal" style="font-weight: 700;">Get Started</p>
</ion-button>
But now I feel like its 1996 all over again. What's a clean way to do this?
i added:
ion-button {
font-weight: 700;
}
to one of my random projects and it works as expected.
i then added the <p> </p> tags like you have in your example code inside my button with the text for the button and the font-weight no longer effected the text.
maybe remove the <p> </p> tags if you are using them then try again.
I am using a <textarea> with Ionic 3 but when I type in, only the first character is displayed, not the rest.
Only wait to display them is to close the keyboard, scroll the page and come back.
Here is my code:
//view
<textarea class="textarea" spellcheck="true" autoComplete="true" autocorrect="true" placeholder="Message" [(ngModel)]="message"></textarea>
//css
textarea.textarea {
width: 100%;
background-color: #fff;
border: 0.55px solid #c8c7cc;
border-radius: 5px;
padding: 4px 45px 4px 4px;
-webkit-appearance: none;
}
I guess it is a refreshing issue but don't know how to solve it.
Ionic has its own version of textarea called ion-textarea:
https://ionicframework.com/docs/api/components/input/Input/
It is normally used in the context of a list to structure the content:
<ion-list>
<ion-item>
<ion-textarea placeholder="Enter a description"></ion-textarea>
</ion-item>
</ion-list>
This should also avoid your input problem.
if you can use , use this code.
I think textarea doesn't work in ionic well.
I'm trying to figure out how a form like this is constructed/styled (CSS? Javascript?):
It can be found at the very bottom of http://www.masterdynamic.com/
I want to say it's made through some sort of Javascript library, but could be totally wrong. I tried inspecting with Chrome Dev Tools, but couldn't really get a clear idea. Not really sure where to start with styling something like this (or even what to search for, all efforts have brought me to normal forms).
Any and all help would be greatly appreciated.
Thank you!
Here is the HTML and CSS:
<input type="text" name="email" placeholder="Enter Email"
dir="auto" aria-label="Email " title="" autocomplete="off">
form input[type=text] {
width: 80%;
color: #b1aca1;
padding: 10px 10px 10px 0;
font-family: blenderthin,Verdana,sans-serif;
font-weight: lighter;
font-size: 3rem;
border: 0;
background-color: transparent;
outline: 0;
display: inline-block;
vertical-align: bottom;
}
I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices.
This is what I have:
//Source code
<div id="signinbutton" class="blue_button">Sign In</div>
//desktop.CSS
.blue_button {
width: 130px;
height: auto;
padding: 8px;
margin: 0% auto 20% auto;
background-image:url(../../images/bluebar5.png);
color: #FFF;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14pt;
font-weight: bolder;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: default;
}
.blue_button:hover {
opacity: 0.7;
}
//Handheld.css (this overwrites css on desktop)
.blue_button {
width: 260px;
font-size: 18pt;
background-image:url(../../images/bluebar6.png);
}
I tried applying the style to #signinbutton without success.
You should use a <button> or <input type="button"> tag instead of a div. While the <div> button functionality may work in some browsers, it can be a bit of a hack compared to the traditional button tags
You can wrap your div around <a> like this. It's perfectly valid with html5 now.
<div id="signinbutton" class="blue_button">Sign In</div>
You just need to adjust
Reference:
https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
Try adding to the style of the div {cursor:pointer}.
I have a css menu that works well in most desktop browsers, but I have had issues get my drop down menu to work on IPad and Iphone. Here is the site in question: http://bakersfield.kernhigh.org/
I am quite new to css and javascript, so any help would be great.
Thanks
Currently, iOS does not support :hover, so your navigation will not unfold in iOS as it does on a desktop.
Have you considered jQuery Mobile? I would only suggest that if you were developing a seperate mobile version, though.
Otherwise, you could use this jquery (you must also include jQuery then):
$('nav li').bind('touchstart', function(){
$(this).addClass('hover');
}).bind('touchend', function(){
$(this).removeClass('hover');
});
This will add a class (hover) upon the touch, and remove it upon removal of the finger.
You will of course have to edit this for your needs. I only say this because you say you are new to javascript and I don;t want to confuse you.
Drop down menus can suck, especially making them work with touch screen devices since you can't 'hover' on a touchscreen. This is how I do my drop down menus, it is pure CSS, and I have tested it on chrome, ff, ie7+, safari, iPhone and multiple Android (of course, you will want to tweak colors and sizing):
HTML
<div id="navigation">
<ul id="nav">
<li><a href="index.html>Home</a></li>
<li>Drop Down <!--Notice didn't close the li yet->
<ul>
<li>Drop Down Item</li>
<li...../li>
etc...
</ul>
</li>
<li>Another Drop Down</li>
<ul>
...
</ul
</li>
</ul>
</div>
CSS:
#nav {
display: block;
text-align: center;
font-size: 1em;
position: relative;
height: 3em;
width: 950px;
margin-right: auto;
margin-left: auto;
list-style-type: none;
}
#nav li {
float: left;
display: block;
width: 75px;
height: 3em;
position: relative;
}
#nav li a {
text-decoration: none;
display: block;
height: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
#nav li a:hover {
color: #990000;
background-color: #999999;
}
#nav li ul {
width: 100%;
display: none;
z-index: 9999;
position: absolute;
}
#nav li ul li {
display: block;
clear: both;
width: 100%;
height: 100%;
background-color: #B5BDC8;
}
#nav li:hover ul {
display: block;
}
The idea behind all of this is to create a list, then inside that other lists to create the drop down elements....
Then, from there, display only the primary list items to begin with, then show the drop down menu on hover (or in the case of a mobile device on click by making the main list item a link to "#" thus creating and active/hover state)...
The only issue is that by using display:none it isn't screen reader friendly, however I always include site navigation at the bottom that is screen reader friendly, and SEO friendly as well.
You can see an example of this in action on this website I am working on here
In general, drop down menu's such as this usually aren't good practice to have for mobile sites. This is because you can't really hover over a navigation item with your finger, and pressing an item could prove difficult without zooming in on the menu.
A solution is having different CSS styles for your navigation when being viewed on a mobile device. Here is a great resource for helping you convert your navigation to be more mobile friendly:
http://css-tricks.com/convert-menu-to-dropdown/