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 have a textfield in my html page with css
#textField {
background-color: #000000;
color: #ffffff;
}
Thus showing a text field with black background color and white text.This works fine in all desktop as well as iPad browsers.
But in Android default browser while on clicking the text field the background color changes to white and text color to black.
Please mention how to override this.Thanks in advance.
Please include the following code in your css to avoid overriding of background color in android browser
#textField {
background-color: #000000;
color: #ffffff;
-webkit-user-modify: read-write-plaintext-only;
}
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.
My htmlcode:
...
<input placeholder="Username" type="text" name="username" id="username">
<input id="inputPwd" placeholder="Password" type="password" name="password">
...
With my CSS:
input {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
color: #000000;
text-decoration: none;
border: 0px solid white;
outline: 0 none;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
border: 0px solid #000000;
outline: 0 none;
}
My goal is to remove borders. It works fine in Firefox, Google Chrome, iPhone Safari, etc. Unfortunately I have an issue with Android 2.3.4.
With Android when I focus on the "password" field, I see thin black border... I tried all CSS combinations, nothing helped...
Many thanks in advance for your help!
-webkit-user-modify: read-write-plaintext-only; for remove ce special styling on focus ;)
This remove all the Webkit style on focused input in Android (PhoneGap)
For Android ICS, adding both should solve the problem:
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:rgba(0,0,0,0);
I'm not sure which build you were testing on, but I ran into similar problems w/ WebKit 533.1 on Android. I decided to dig into the source code for the default styles. There are a handful of default focus styles and 2 specific to the "password" type.
Our problem was related to the "outline" property. According to Mozilla's MDN, "Outlines do not take up space, they are drawn above the content." (Emphasis mine.) In other words, the default outline styles were being drawn above our border styles.
Try manipulating the outline styles instead of the border or -webkit-tap-highlight-color styles.
change your style like this:
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
-webkit-tap-highlight-color:none;
border:none;
outline:none;
}
Looks like the web browser, which included with Android 2.3, displays some special input field (native?) over the html content when you type a password. This input field always has the 1px black border and white background.
The workaround is to use the <input type=text> field instead of standard password field and add the -webkit-text-security: disc; style.
But since Android 2.3 is no longer a priority platform, I will leave this black border issue as is in my project.