I am working on a website in which I want search button to look same across all mobile and tablet devices. I have created the fiddle for that. The code which I have used for the search button (for mobile/tablet view) is:
#media only screen and (max-width: 767px) {
#gv_search_button_2777 {
padding-left: 5.5%;
padding-top: 0.5%;
padding-bottom: 0.5%;
padding-right: 5.5%;
background-color: white;
font-size: 12px;
border-radius: 3.5px;
border: 1px solid #ccc!important;
}
}
<div class="gv-search-box gv-search-box-submit">
<input type="hidden" name="mode" value="all">
<input type="submit" class="button gv-search-button" id="gv_search_button_2777" value="Search">
</div>
Problem Statement:
If I take the above fiddle in the mobile view from the actual browser it looks good but if I see it from my phone it looks different.
Here is the screenshot for the Search button which I want to look on all mobile devices:
I am wondering what changes I need to make in the CSS codes in my fiddle so that above screenshot is present on all devices.
On my iphone when checked on safari and chrome, I am seeing this(which is not right):
You can set appearance: none to tell iOS Safari (and others) not to apply OS native styling to the element:
.button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
From there you can reset browser stylesheet attributes (e.g. margin, padding, font, etc) and apply your own custom styles.
Related
I have an email contact form, with a submit button, and some basic styling on the button. All of the styles work on Desktop, and most of the styles are applied on mobile, just not the padding or border-radius. I already tried switching to EM units instead of pixels. The url is http://sharperprogrammer.com/contact (not self-promoting, just thought it would help to see the full thing)
HTML:
<input type="submit">
CSS:
input[type=submit] {
background-color: #4CAF50;
color: white;
/* padding: 12px 20px; */
padding: 1.2em 2em;
border: none;
border-radius: 0.4em;
cursor: pointer;
margin: 10px;
}
I have even connected my iPhone to my Mac and opened the Safari Developer Tools, and I can check and uncheck to toggle different styles on the button, but the padding seems to do nothing. It's weird to me because the other styles like the background-color work fine, so I know everything is connected at least. Thanks for taking a look!
Edit: The style is just fine on an Android phone's Chrome browser, but the styling isn't applied correctly on my iPhone's Chrome or Safari browser. And I've cleared my browser cache just in case.
Here is a screenshot:
It looks to me like Safari / Chrome Mobile have some default button styles that are more specific than input [type=submit]. Perhaps the more specific styles don't specify background-color which is why yours is working.
I found two solutions, which I will link below, that both vouch for adding -webkit-appearance: none; as a solution.
CSS submit button weird rendering on iPad/iPhone
Why is my button style changing when on laptop and mobile
Hopefully this will work for you :)
Try to add this:
in the navbar.css file inside media query :
#media only screen and (max-width: 600px) {
.navbar{
flex-direction: column;
align-items: center;
}
}
The code is very straight-forward, see part of it below. Full example here:
Plain HTML:
<div class="test1">
<div class="silver1">
<span>test1</span>
</div>
<span>box 1</span>
</div>
CSS
.test1 {
border: 1px solid red;
width: 80px;
background-color: red;
}
.silver1 {
width: 30px;
height: 30px;
position: relative;
}
.test1:hover .silver1 {
top: 30px;
left: 80px;
border: 3px dotted blue;
background-color: yellow;
}
Tests:
Hovering with a mouse in any popular browser in either Windows or
Mac works fine.
By tapping the boxes on an Android Mobile it works
as well.
Tapping on Safari (iPhone/iPad) nothing happens.
Holding down on Safari sometimes work.
Question
How do I activate :hover for Safari iOS?
Ideally pure CSS solutions.
Try if with placing an :active after the :hover.
https://codepen.io/mausinc/pen/LgvmXv
.test1:hover:active .silver1 {
top: 30px;
left: 80px;
border: 3px dotted blue;
background-color: yellow;
}
Good luck
Well "hover" isn't a thing on touch interfaces.
Chrome mobile tends to call the first tap, hover if it's specified and a subsequent tap the same as a click. This functionality can get strange for users too. Safari, as you discovered, ignores it completely.
I would suggest that you try really hard to remove any content from hovers that users MUST do to complete a process or navigate and replace them with interaction specific paradigms.
You may even want to test if the device is touch based and provide a completely different experience for those users instead of trying to match hover.
Here's a media query for touch devices. #media (any-hover: none) { ... }
More info from CSS-Tricks and a good overview of what's possible in 2018.
So i have a button which should be positioned to the right side of the page, But when site loads on mobile, i want it to center in the very middle of the Logo but instead renders right but incomplete and when it is rendered on desktop, it renders way to the left.
Here is how it looks on Mobile:
Desktop:
So anyway to achieve this ? Here is a bit of the code:
.mainBanner input{
position: relative;
left: 70%;
}
#buttonPush{
height: 35px;
width: 95px;
background-color:#1abc9c;
border: none;
color: #fff;
border-radius: 3px;
font-size: 22px;
border-bottom: 2px solid #16a085;
/*position: absolute;
left: 90%;*/
}
Here is the HTML code:
<header>
<div class="mainBanner">
<img id="mainLogo" src="img/logo.png">
<!--POST BUTTON-->
<div id="buttonPost"> <form action="#openModal"><input id="buttonPush" type="submit" value="Post"></form></div>
</div>
For that you need to use CSS3 Media Query.
Using that, you can change the CSS properties of the elements. Here is a general example:
#media only screen and (max-width: 900px) {
// properties here..
}
Now if you want to change the properties for a screen that is a bit shorter in size:
#media only screen and (max-width: 300px) {
// properties here...
}
Using this, you can change the style of the website on different screen types and sizes. You can also change the theme depending on whether the screen is mobile or desktop.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Chrome renders passwords smaller than Firefox. If I manually increase the font-size of a password input element in Chrome to match Firefox, then the caret height will be increased too, which I don't want. What's the workaround to this?
Here you go (using a media query to select Chrome... and Safari, which I don't have to check):
<input type="password" class="pass" value="dfjlfsdkljf"><br>
<input type="password" value="dfjlfsdkljf">
#media screen and (-webkit-min-device-pixel-ratio:0) {
.pass {
-webkit-text-stroke-width: .2em;
letter-spacing: 0.2em;
}
}
http://jsfiddle.net/exbFb/3/
And a blanket selector, to affect a input[type=password] elements:
#media screen and (-webkit-min-device-pixel-ratio:0) {
input[type=password] {
-webkit-text-stroke-width: .2em;
letter-spacing: 0.2em;
}
}
http://jsfiddle.net/exbFb/4/
First question...
I'm having trouble getting ANY of the Drop down menu/Input Select's to appear with size 18 font in Safari.
Works fine in FF.
Code:
<form class="form">
<select name="make">
<option value="0"> All</option>
</select>
</form>
Css:
.form input{
font-size:18px;
margin-bottom:0px;
}
Any ideas? Can view live at [http://www.motolistr.com][1]
Best,
Nick
EDIT 1:
Thanks for the quick reply. I added a style to the select itself to avoid confusion. I tried;
<select name='make' style='font-size: 18pt;'>
</select>
And
<select name='make' style='font-size: 18px;'>
</select>
And
<select name='make' style='font-size: 1.3em;'>
</select>
Still not working in SAFARI...Again FF works fine with all 3.
Best,
Nick
To style a select in Safari you first have to turn off the os styling:
select {
-webkit-appearance: none;
}
Funny thing though: If you change the background- or border-properties on your select Safari will all of a sudden also apply your font-size.
I figured out a way that safari will pick up on font-size ... all you need to do is set a border color, like the following.
-webkit-appearance: none; will make you lose all of safari's attributes, like the arrows... below you can increase the size without losing that.
Will Work in Safari
<select style=" font-size: 3em; border: black;">
<option>TEXT</option>
</select>
Won't Work in Safari
<select style=" font-size: 3em;">
<option>TEXT</option>
</select>
It appers select controls are non-stylable in Safari; it always uses its own OS X-style widget drawing routines to display them. Until recently, this was the norm: browsers would typically use plain OS-provided widgets for form fields. CSS2 doesn't really say how styles should apply to form fields (if at all).
Some browsers today apply the select's font style to the options (IE7, Opera); some allow the on-page select and the pop-up options to be styled differently (Mozilla, Chrome), so the best you can do for consistency is:
.form select, .form option {
font: Whatever 18px;
}
But if you absolutely need a stylable drop-down in Safari you will need to write your own clunky ersatz-select in JavaScript. (Or see one of the many existing scripts and framework plugins that do this.)
First off this
.form input{
font-size:18px;
margin-bottom:0px;
}
will not work because you are not styling the select element you are styling input elements. Try this and it will most likely work.
.form select {
font-size:18px;
margin-bottom:0px;
}
At least in Safari 5.1 (I don't have 3 running anymore) you can turn off the default styling with:
select{-webkit-appearance: none}
Then it will conform to your font sizing.
The select technically isn't an input tag. Try assigning a class to your select and set the style for the class.
EDIT: Turns out that Aqua style selects only have three different font sizes available. If you need to set an exact font size, you can turn off Aqua by giving the item a background color, then set the size. FYI, it appears that 20px works without setting the background so it must size up to the next supported Aqua size.
Reference: http://particletree.com/notebook/design-friendly-select-elements-in-safari-3/. Test page with various styles at http://particletree.com/examples/safari3/drop.html.
<select name='make' class='big-input'>
</select>
.big-input
{
background: #fff; // turns off Aqua
font-size: 18pt; // assuming you meant 18pt, not 18px
margin-bottom: 0px;
}
Setting line-height:100% will constrain the height of the select box for a more consistent look, but it still doesn't affect the actual font size.
In some cases it can help:
select {
-webkit-appearance: menulist-button;
font-size: 30px;
}
I found a way of changing the font size of a select element in Safari through the use of percentages.
Your code then becomes:
<select name='make' style='font-size: 120%;'></select>
For a 13px font size (which I found very appealing).
This is tested in Safari 5.1.3
You can target Safari select tag by doing this:
select {
width: 224px;
line-height: 1.8; (This can be in px too)
}
try this
<style>
select { border:0; color:#000000; background:transparent;
font-size:20px; font-weight:bold; padding:2px 10px; width:378px;
*width:350px; *background:#FFFFFF; -webkit-appearance: none; }
#mainselection { overflow:hidden; width:350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("img/arrow.gif") no-repeat scroll 319px 5px #FFFFFF;
}
</style>