I have this button
.btn-feedback {
padding: 5px 10px !important;
}
.btn-feedback {
text-align: left;
margin-bottom: 0;
line-height: 1.45857;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border-width: 1px;
border-style: solid;
border-radius: 4px;
}
button, html input[type="button"], input[type="reset"], input[type="submit"]{
-webkit-appearance: button;
}
button, input, select, textarea {
margin: 0;
}
<button name="button" type="submit" class="btn-feedback">Skip</button>
Although everything looks normal on Google Chrome for Mac:
when I view the same button on Google Chrome on Android, it appears to be missing the border ...
I'm unfamiliar with the rendering discrepancies between the two platforms. Any thoughts on how I can modify my styles so that the button appears the same on Android Chrome as it does on Google Chrome on a Mac?
Styling for the button border is missing. If you do not explicitly state the border color styling, you will get the styling the device browser user agent gives you.
.btn-feedback {
padding: 5px 10px !important;
}
.btn-feedback {
text-align: left;
margin-bottom: 0;
line-height: 1.45857;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
/*Explicitly add a color for the border. I have also used shorthand for border style color and width*/
border: 1px solid #444;
border-radius: 4px;
}
button, html input[type="button"], input[type="reset"], input[type="submit"]{
/*Add all the prefix versions for the different browser types*/
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
button, input, select, textarea {
margin: 0;
}
<button name="button" type="submit" class="btn-feedback">Skip</button>
In WebKit (and Blink) engine, <button>s get the -webkit-appearance:button; default style.
-webkit-appearance:button gives the buttons such look and feel (see below) and is platform dependent.
You can apply it to other elements:
.webkit-appear-button { -webkit-appearance:button; }
<button>I'm a button</button>
<span class="webkit-appear-button">I'm a span, but look like a button</span>
That's what's happening to your button. Since you don't specify a background-color it inherits from -webkit-appearance:button, which, as said, changes depending on the platform.
Solution: use background-color: #color (background: #color equivalent).
Related
Here's a sample page:
html,
body {
margin: 0;
padding: 0;
}
header {
padding: 16px 0;
text-align: center;
background: black;
}
header img {
width: 234px;
height: 222px;
vertical-align: bottom;
}
li {
background: url('images/WhatsApp.png') no-repeat right;
padding: 30px 50px;
list-style: none;
}
a {
font: bold 32px Calibri;
color: black;
text-underline-position: under;
}
<html dir="rtl" lang="fa">
<header>
<img src="logo.png" alt="Logo">
</header>
<main>
<ul>
<li>گروه اطّلاعرسانی</li>
<li>ارسال تکالیف</li>
</ul>
</main>
It doesn't look good on Android Chrome, i.e. the underline is cut and crosses some descenders.
Here's the final result, which I tested on the latest version of Chrome, 93:
I see that the text is cut on the letters that tend to intersect with the underline; so you can increase the offset between the line and the text using text-underline-offset property in CSS:
text-underline-offset = 2px
/* or */
text-underline-offset: 0.1em;
If you used the pixel version, you probably need to manipulate the 2px a bit, but make sure to test that on different devices.
Make sure that if you increase this offset much, then you'd get them intersected with the text in case you have a multi-lined text. I recommend to use it on a single line of text, and that is already your case.
This issue also might be solved if you change the font type, as the height of fonts differs from one typeface to another, so you can check this as well.
For further research check the documentation, and this SO question.
Before anyone thinks this is a simple question or is a possible duplicate, please read the full post.
I'm developing an Android application and have implemented a WebView to act as part of the application. The WebView shows content from a website which is made with bootstrap and is mobile friendly. However, the CSS messes up here and there and as a result, the entire application looks odd and elements seem to be 'out of place'.
For example, I place a box and some text inside a container and place it specifically using CSS margins. Like below:
.testcontainer {
border: 1px solid red;
height: 50px
width: 100%;
}
.testcontainer .box {
height: 50px;
width: 50px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.testcontainer .text {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px solid blue;
}
<div class="testcontainer">
<div class="box"></div>
<div class="text">Testing</div>
</div>
Now all is good on a MacBook Safari and Opera browser and the text's border is pixel perfect and is aligned with the top of the blue box etc. However, on the WebView inside the application, the text is around 2px off and in some cases, 5px and so on. Why? I've tried to use em instead of px for font-size but the same issue occurs. What am I missing?
Just that, I need to remove a black underline in the text in the html textboxes. I've tried with text-underline and spellcheck=false and it's not working.
I hope it may help you can do css
This should do it:
input.myBox
{
border: 0px solid #000000;
border-bottom-width: 1px;
background-color: transparent;
}
Tested in IE8 (IE7 compatability mode)
I'm developing application in Phonegap and have some styles on my textarea:
textarea {
background: url(img/ynxjD.png) repeat-y;
width: 600px;
height: 300px;
font: normal 14px verdana;
line-height: 25px;
padding: 2px 10px;
border: solid 1px #ddd;
}
Because Android browse has default styles on input elements and textarea like overlays and basically when I click on my textarea all styles dissappear and big ugly white rectangle with green corners appears, I found a workaround with this:
textarea {
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
as mentioned here:
Disable Android browser's input overlays?
Everything is great, but when I write in the textarea and go to new line android keyboard dissapears and I need to click again to appear and that is with every new line.
I am testing on HTC desire X if that matters
I would be glad if someone help me fix this : )
I am having problems with the default style of Sencha (or Android not sure) for the text inputs and password fields, it works ok on iOS devices and on some android devices, but HTC and others put their awful default style (white background and grey border) which i can nohow change or hide. Because of that all the layout looks very awful....
see the image please.
Even the sample of Sencha Touch has the same problem.
see please the second image here.
Please if you have any suggestion what is the reason of it or how it is possible to hide i
would be very grateful!! here is all i have tried for that
input {
background: transparent !important;
border: 0 transparent !important;
-webkit-appearance: none;
}
input[type=text] {
background: transparent !important;
border: 0 transparent !important;
-webkit-appearance: none;
}
input:focus{
outline:none;
background: transparent !important;
border-color: transparent !important;
-webkit-focus-ring-color: transparent;
-webkit-appearance: none;
}
Thanks in advance
Andrei
What you're seeing is actually an Android "feature" that generates a native control on top of your styled input field.
If you try to move your field on focus you should see that the field is intact, try the following css rule to see the phenomena:
input:focus {
position: absolute;
left: -20px;
}
What you could do is try to set -webkit-user-modify: read-write-plaintext-only; which works on some phones (not sure about < 2.3), but can break some functionality. E.g. for a number field you still get a qwerty-keyboard instead of a number pad etc.
So try it out, hopefully it helps you and is suitable for your needs.