The simple HTML below displays differently in Firefox and WebKit-based browsers (I checked in Safari, Chrome and iPhone).
In Firefox both border and text have the same color (#880000), but in Safari the text gets a bit lighter (as if it had some transparency applied to it).
Can I somehow fix this (remove this transparency in Safari)?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
input:disabled{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<input type="text" value="disabled input box" disabled="disabled"/>
</form>
</body>
</html>
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
Phone and Tablet webkit browsers (Safari and Chrome) and desktop IE have a number of default changes to disabled form elements that you'll need to override if you want to style disabled inputs.
-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */
UPDATED 2021:
Combining ideas from this page into a "set and forget" reset that makes all disabled text the same as normal text.
input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
-webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
opacity: 1; /* 2. correct opacity on iOS */
}
it's an interesting question and I've tried plenty of overrides to see if I can get it going, but nothing's working. Modern browsers actually use their own style sheets to tell elements how to display, so maybe if you can sniff out Chrome's stylesheet you can see what styles they're forcing on to it. I'll be very interested in the result and if you don't have one I'll spend a little time myself looking for it later when I have some time to waste.
FYI,
opacity: 1!important;
doesn't override it, so I'm not sure it's opacity.
You could change color to #440000 just for Safari, but IMHO the best solution would be not to change looks of button at all. This way, in every browser on every platform, it will look just like users expect it to.
for #ryan
I wanted my disabled input box to look like a normal one. This is the only thing that would work in Safari Mobile.
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
You can use the readonly attribute instead of the disabled attribute, but then you will need to add a class because there isn't a pseudo-class input:readonly.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>
Beware that a disabled input and readonly input aren't the same.
A readonly input can have focus, and will send values on submit. Look at w3.org
If you want to fix the problem for all the disabled inputs, you can define -webkit-text-fill-color to currentcolor, so the color property of the input will be used.
input[disabled] {
-webkit-text-fill-color: currentcolor;
}
See that fiddle on Safari
https://jsfiddle.net/u549yk87/3/
This question is very old but I thought that I would post an updated webkit solution.
Just use the following CSS:
input::-webkit-input-placeholder {
color: #880000;
}
Can you use a button instead of an input?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button:disabled{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<button type="button" disabled="disabled">disabled input box</button>
</form>
</body>
</html>
Related
Is there any way I can change the UI of DartPad from Dark to Light or vice-versa?
I didn't find any button on the DartPad to do so.
There is no lightmode for DartPad, even though there are some requests.
Also see this issue.
I've just installed the chrome extension 'Invert!' which worked. Not wonderful colouring but better than black for me.
It seems that they support specifying a theme when embedding via iframe.
So if you want light theme, you can create local dartpad.html (or whatever .html) file and place this code into it:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
iframe {
display: block;
border: none;
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<iframe src="https://dartpad.dev/embed-dart.html?theme=light"></iframe>
</body>
</html>
I also placed the same file to GitHub Pages, so you just can use this link: https://ivanzoid.github.io/dartpad-light/
I am creating an ordered list within a webview and I want to remove the indentation from the list, i.e. have the list aligned with the first paragraph. Here's HTML:
<body style="font-family: arial""font-size:18">
<p>First paragraph.</p>
<p>
<ol style="margin-left:0px">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
Notice that with the margin-left:0px, the webview still indents the list by about 17 points. If I say margin-left:-17px, I can make it work with a hack but would rather not as it seems more like I'm doing something wrong with the construction of my HTML.
Can anyone see any problems with it?
Updated HTML - Still doesn't work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
ol {
padding-left: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<p>
<ol>
<li>List item 1.</li>
<li>List item 2.</li>
<li>List item 3.</li>
</ol>
</p>
</body>
</html>
I'm using iOS 5.1 on iPhone 3GS
You can archive style like that with :
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Try This....
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
.flush-left {
padding-left: 25px;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<p>
<ol class="flush-left">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
</html>
A couple of other pointers. Test your stuff out in test files in html on your desktop and load them into Safari and the iOS Simulator (Drag html file onto safari open in simulator).
But then you can use Regular Safari Debug tools to examine the html and css. or Firebug in Firefox.
Also, when in doubt www.w3schools.com ... :)
Perhaps I'm a bit late for your needs – I just came across this.
I only noticed this on my iPhone, and not my iPad, nor Safari on the Mac. I found that a bit strange that this issue would only be in the one version of Safari, and not all. I wasn't happening in Chrome either.
When looking in the Chrome developer tools, I noticed that the user agent stylesheet had added a number of -webkit prefixed styles, all to do with margin and padding:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
When I first saw that, I was wondering if that was the issue, but, it was late, and I had to take a sleep break. Today, I tackled it again, but forgot about these styles. I looked around, and came across #Remover's question. But, setting a specific pixel-based margin or padding didn't sit well with me.
At some point, I decided to narrow my browser window in Chrome, and low and behold the issue was there as well, only when I narrowed it to be close to the width of an iPhone. So, this isn't just an iOS issue. It's webkit.
I looked again at the styles in the dev tools, and saw again the -webkit styles, and the 40px on -webkit-padding-start. I played around with my css, and that was indeed the culprit.
I then added the following to my stylesheet:
ol {
-webkit-padding-start: 2em;
-ms-padding-start: 2em;
-moz-padding-start: 2em;
-o-padding-start: 2em;
padding-start: 2em;
}
I did some quick research, and it looks like only -webkit and -moz are using padding-start, but I added the rest, just in case they pick it up – though, now that Opera has switched to webkit, -o probably isn't needed.
In my case, I used 2em, as that worked with my style. Not sure if 2em will work across the board or not.
Edit
I should have also mentioned that it probably only shows up on small screens because it's set at 40px. In my design, my base font-size at full screen is 23px, and at 480px and below is 10px, which is quite a bit of a difference.
If you merely assign a padding of zero, the bullets go off the screen. I found that the following worked perfectly for my webview
ul,ol {padding-left: 20px;}
li {padding-left:2px;}
isn't it
<ul><li></li></ul>
not <ol> ?
also it looks the you might have a syntax error on your style for your body tag
:)
~ Dan
i found out the right answer (not to adjust text size on rotation !)
Preserve HTML font-size when iPhone orientation changes from portrait to landscape
but being very naive to css how to use it inline ?
i used as follows, but it did not work
<html>
<head>
</head>
<body style ="-webkit-text-size-adjust: none;">
<font face="Arial" size="9";>< a href="mailto:subject= mysub&attachment=myatt.doc"> mail this< /a>< br/>< b>< i>Header< /i>< /b>< br/></ font>
</body>
</html>
The example you point to is a style on the html tag, not the body tag as you have done. I suggest you try:
<html style="-webkit-text-size-adjust:none;">
and see how that works. Or you can just put the style into your head section like so:
<head>
<style type="text/css">
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
</style>
</head>
Interesting trick, I haven't actually ever done this myself.
I'm trying fade out the bottom of the UIWebView in my detailView. It's more like fading last 20-40 px. I'm using CSSTricks code for "ReadMoreFade" (link). My simplified version is pasted below.
My problem is when I start scrolling in my UIWebView, faded area stays there like a block. I'm attaching a screenshot that shows this. Any suggestions or hints? Thank you.
SCREENSHOT:
http://i51.tinypic.com/2rmxsfp.png
<!DOCTYPE html>
<html>
<head>
<title>Fade bottom</title>
<style>
body{background:#FFF}
p {
color:#000;
margin:0 auto;
text-align:justify;
text-indent:30px;
width:600px;
}
#fadeBottom {
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, rgba(255,255,255,0.7)));
bottom:0;
height:50px;
left:0;
position:fixed;
width:100%;
}
</style>
</head>
<body>
<p>Some long text here. Lorem ipsum?</p>
<div id="fadeBottom"></div>
</body>
</html>
For this situation, I'd just make a white image with a transparent gradient and overlay it on top of that UIWebView as needed. It's going to be a lot quicker than trying to debug browser stuff...
Whether you use an image or a CSS3 gradient, I'm afraid position:fixed doesn't work on iOS.
I have a problem that in IE8 the enter does not work to submit a form. I have generated a test page to expose this problem. It seems that displaying the form in the onLoad function disables results that the enter button does not trigger a submit anymore. Is this a bug in IE8 or is it some security issue?
The code to reproduce this is:
onload = function() {
document.getElementById('test').style.display = 'block';
}
#test {
display: none;
}
<form id="test" method="get" action="javascript:alert('woei!')">
<input type="text" name="user" value="">
<input type="password" name="pw" value="">
<input type="submit" value="submit" id="submit">
</form>
I have found a proper solution and wanted it to share with u guys.
Instead of using <input type="submit...>, use <button type="submit"...>.
This will do exactly the same in the other browsers (IE6-7, FF3) AND works in IE8. :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#test {
display: none;
}
</style>
<script type="text/javascript">
onload = function() {
document.getElementById('test').style.display = 'block';
};
</script>
</head>
<body>
<form id="test" method="get" action="javascript:alert('woei!')">
<input type="text" name="user" value="" />
<input type="password" name="pw" value="" />
<button type="submit" value="submit" id="submit"></button>
</form>
</body>
</html>
$("form input").keypress(function (e) {
if(e.which === 13) {
$("form").submit();
}
});
Above is a proper fix. Ref: IE Not submitting my form on enter press of enter key?
I think everthing is much more complicated than you think...
when a form's display value is set to none with a css class or just with a style attribute on page inital, hitting the enter key in a text field does not work only if you have more than one input field with text type... if you have one text field it works fine.. if you have more than one, it does not fire form submission...
Here i made a demo...
Works Fine (Normal Form)
http://yasinergul.com/stackoverflow/ie8-enter-key-bug/one.html
Works Fine (Form hidden & set back visible but it's with one text input)
http://yasinergul.com/stackoverflow/ie8-enter-key-bug/two.html
Does Not Work (Form hidden & set back visible but it's with two text input)
http://yasinergul.com/stackoverflow/ie8-enter-key-bug/three.html
i think the best approach is to give a .hidden class to the object but not setting display:none for this css selector. you can make it hidden with jquery like
$(".hidden").hide();
as the page loads the form is shown for miliseconds but gets hidden after jquery works...
I can't say if it is a bug exactly, but I can confirm that the behavior you report has changed in IE 8... and I imagine it is probably a bug, not an deliberate change.
If the form is set with CSS display:none the default submit button behavior doesn't work.
Other browsers, including IE 7 (or even IE 8 using IE 7 standard compatibility mode) do not have problems.
I've worked around the problem myself by just using height:0px; in the CSS, then having javascript set the appropriate height when I want to show the form. Using height instead, the default enter key submit behavior seems to work normally.
Old ticket, but I'd like to add what I think is the explanation:
IE8 does the following peculiar thing: the Enter key will submit the form, but any
<input type="submit" name="MySubmitButton" value="I hope I detect THIS VALUE in POST" />
won't be sent in the POST.
IE9 changes the behavior and sends the value. Chrome has always sent the value, as far as my tests have shown.
I hope this helps...
For any future users stumbling upon this question:
What worked for me was adding a DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
A fix to what #Jitendra Pancholi suggested- now it submits only the form we want, not all of them
$("form input").keypress(function (e) {
if(e.which === 13) {
$(this.form).submit();
}
});
I tried it in IE8 and it works for me. You have to make sure that part of the form has focus though.
Javascript has a focus function that you can use to set the focus if that's what you need.
var textbox = document.getElementById("whatever name input box's id will be");
if(textbox) textbox.focus();
You may want to add a onkeyup event to your input boxes so that if you hit an enter in the input box then it will also submit.
As CodePartizan mentioned, you need the focus on the button otherwise, so if you tab over to the button, or click on it, it seems to work for me also.
I believe Yasin has got the point.
I just had the same problem: multiple text fields within a form whose visibility is "hidden".
My workaround (to prevent the form from flashing) is to set the form opacity to 0 in the css, and then customise its style settings with jQuery on document ready.
I believe this is not something to fix with JS.
Yeah, I was bitten by this bug too today. I found this workaround, though (diff from the OP):
<script type="text/javascript">
onload = function() {
document.getElementById('test').style.display = 'block';
+ document.getElementById('test').innerHTML =
+ document.getElementById('test').innerHTML;
}
</script>
</head>
Simply recreate the contents of the form from the contents of itself. Yikes. But it works. (Famous last words...)
This works for me in IE8. I had this problem when using only one input field.
Read more: http://www.rachaelarnold.com/dev/archive/enter-key-form-submission-bug#ixzz2Y5Zwgj2k
I had the same issue with ie and none of the solutions helped until I read this:
http://www.rachaelarnold.com/dev/archive/enter-key-form-submission-bug#ixzz2Y5Zwgj2k
my form only had one input field....duh! :)
Found a working solution.
Make the submit button invisible instead of using display:none;
input#submit {
color: transparent;
background: transparent;
border: 0px;
}