I am developing responsive website. I have given styling to input box like following.
CSS : >
input[type="text"] {
border:1px solid #F2F2F2;
background:none;
font-size:14px;
font-family:'Raleway';
font-weight:500;
text-transform:uppercase;
color:#666666;
}
Now, this all thing works perfectly in desktop as well as Samsung mobiles.
But on iPhone,iPad and Blackberry phone there is some 1 pixel box-shadow coming inside the textbox.
Does anybody faced this kind of issue, if yes than please provide my a solution for it
By Default iPhone and iPad used safari browser.
And safari shows some inner shadow in the input box by default.
For that you have to use -webkit-appearance: none;
So, your code will be like following:
input[type="text"] {
-webkit-appearance: none;
border:1px solid #F2F2F2;
background:none;
font-size:14px;
font-family:'Raleway';
font-weight:500;
text-transform:uppercase;
color:#666666;
}
I hope it will work with Blackberry too.
Related
I'm working on a web app that, for the most part, looks fine on both a PC and a phone. However, if I have a dropdown list, the fonts are normal on a PC, but on a mobile browser, the items are super enlarged. I'm not doing anything too fancy in the background. I'm just wondering if there is a way to fix this? The "Select Recommendations" is the dropdown list.
The CSS is:
<style>
ul,li { margin:0; padding:0; list-style:none;}
.label { color:#000; font-size:16px;}
.ms-options-wrap > .ms-options {
padding: 10px;
font-size: 1.2em; (I tried different px and % as well...it only changes it on the PC web browser. Mobile browser is still enlarged)
}
label{
margin-bottom: 0px;
padding-bottom: 5px;
color: #555 !important;
}
</style>
Well, it appears this is strictly a bug with Android Chrome. I've tested it under Safari on an iPad and using Firefox on an Android phone. It also works with Firefox and Edge on a PC. So I'll just close this for now. Android Chrome... insert eyeroll emoji
I'm trying to remove this border around my PayPal input as well as center align the text.
It works fine in Firefox but bugs in Chrome.
Here's a link to what I'm working on.
http://jsfiddle.net/R28f7/1/
I've tried this focus fix, but no luck.
textarea:focus, input:focus{
outline: 0;}
I have been trying to fix this for a while now and any help would be appreciated. Thank you!
Are you able to change the HTML markup of the input type to button ? Doesn't seem like you are using it as an image anyways.
<button type="submit" class="button_fix">Order Now</button>
Since you are trying to align your text to the center, remove the padding from the right and left and apply text-align:center; Here is an updated fiddle:
http://jsfiddle.net/DL6QU/7/
Try to use like this: DEMO
HTML:
<input type="submit" class="button_fix" name="submit" value="Order Now">
CSS:
.button_fix {
display:block;
background-color:#c0392b;
text-align:center;
width:200px;
padding:10px 35px;
color:#fff;
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 8px;
/* Firefox 1-3.6 */
-moz-border-radius: 8px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 8px;
font-size:2em;
font-weight:200;
font-family: Helvetica, sans-serif;
margin:10px auto 0px auto;
outline:none;
border:0;
}
Hope this helps
I created a few circles using CSS that I use as text inputs on my HTML index page.
Problem is that when the font inside is relatively large compare to the CSS circle, the circle turns into an oval.
It only happens on IOS. I have tested the page on Safari and Chrome and it's perfectly fine. Don't have android devices to test.
I have tried using meta flags and webkit properties but no go.
Any hints?
input[type=text5]{
position: absolute;
left: 270px;
top: 340px;
display:block;
width:50px;
height:50px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
margin:0 auto;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #464646;
box-shadow: 0 0 3px gray;
font-family:Verdana;
font-size:16px;
font-weight:bold;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
Large Font:
Small Font
well guys, I figured out after playing a bit with CSS properties. For some reason iOS was adding padding to the text. Interesting that none of the desktop browsers added padding. In any case adding: padding: 0px; solved it.
One More Way...
If you apply CSS3 Property box-sizing:border-box; on element being oval in iOS, the problem will be solved.
Working on a windows phone 8 app in Phonegap. When I touch the dropdown box a blue highlight will appear.
I gone through the question already asked here
windows phone 8 highlight colors in input fields
tried the answer
$('select').on('click', function() {
$('input.fakeInput').focus().blur()
})
it solved the issue partially (only on click event). But my page has scroll, so when I try to scroll, the blue highlight is appearing again. I tried 'MSPointerDown, MSPointerUp, MSPointerMove' in the above code, but nothing happened.
Here are the styles I used
{
width: 100%;
background: #fafafa;
color:#a3a3a3;
font-size:14px;
border:none;
outline:none;
display: inline-block;
appearance:none;
height:60%;
min-height: 30px !important;
border-radius:5px;
margin-top: 5%;
padding-left:8%;
}
IE has a pseudo class that overwrites this
select::-ms-value{ background-color: #fafafa; color: #a3a3a3; }
this solves it
link http://msdn.microsoft.com/en-us/library/windows/apps/hh465820.aspx
I have styled submit button with custom background image. But it shows differently on different browsers.
Almost all browsers shows it correct:
But on 2 it have extra height:
Can anyone point what wrong is with my markup?
CSS:
input[type="submit"]{
background: url(http://dl.dropbox.com/u/17055243/icons.png) -99px 0px no-repeat;
width:30px;
height:30px;
border:none;
float:left;
margin:30px 0 0;
cursor:pointer;
}
HTML:
<form>
<input type="text" class="placeholder" value="Search" />
<input type="submit" value="" />
</form>
Tested:
IE 8.0 good
IE 7.0 good
iPhone good
Chrome 24.0 good
Firefox 18.0.2 good
Safari 5.1 (Mac OS X 10.7.1) good
Opera 12.14 (Windows 7 32-bit) good
Safari 5.1.7 (Windows 7 32-bit) extra height
Opera 11.51 (Mac OS X 10.7.1) extra height
Live demo on jsfiddle.
It looks to me the height of the textbox is different not the submit button. Try setting the height of the textbox.
I see in the second search bar, the text is italic and looks slightly smaller. I think the search bar is adjusting to the text and making itself smaller, which makes the search icon appear larger.
What you probably need to do is add this to your stylesheet where the placeholder is controlled:
{font-style:normal}
Try this.
It will give a fix height to the element.
input[type="text"]{
margin:30px 0 0;
width:226px;
color:#999999;
font-size:12px;
font-style:italic;
border:1px solid #cccccc;
border-right:none;
background-color:#ededed;
float:left;
height:28px;
padding-right: 7px;
padding-left: 7px;
line-height: 28px;
}
Submit buttons & input textfields have different default values for borders, margins, padding, etc. First of all you have to put this to both submit buttons and textfields
margin:0;
padding: 0;
border: none;
outline: none;