H, I am new to browser compatibility issue debugging.
I have following html segment:
<div class="settings_content">
...
...
<div class="field">
<input name="name" maxlength="256" type="text" size="32" value="" class="noBdr" disabled="">
</div>
and I have a corresponding CSS for the input field:
.settings_content input
{
color: #505050;
}
in browser Chrome, IE10, IE9, the text indicated by that "input" tag will all be rendered correctly as black. However, if I test it in IE8, the text will still be shown, but the color will turn into grey.
I don't think this is a CSS issue but more of a cross-browser issue. Could experts give me some hints on where to debug? Thanks!
Unfortunately, you can't change the color of a disabled input in Internet Explorer 7, 8 or 9. If it were a regular input, your styles would have applied even without the !important part suggested in the previous answer.
For more info on the topic consider reading another thread.
EDIT:
It works in IE10 though.
You can open this fiddle in IE to check.
Try using !important
Like this:
.settings_content input
{
color: #505050 !important;
}
This might solve your problem...
OR
Use inline css like:-
<input /**********/ style="color: #505050 !important;" />
OR
Use some Browser Hacks for this...
Related
aria-label is not being read on Android Chrome, for example:
<input aria-label="test" type="text">
On Android chrome, it reads "Editbox, double tap to edit, double tap to enter text".
But the same thing is read as "test, text field, double tap to edit" on iOS chrome.
Anyone else ever seen this issue?
That would be a blatant bug with android/chrome. The aria-label attribute is a global attribute that can be used on any element (see https://www.w3.org/TR/wai-aria/#global_states).
What happens if you try aria-labelledby?
<span id="foo" style="display:none">test</span>
<input aria-labelledby="foo" type="text">
Will android/chrome read that?
What happens with the <label> element?
<label for="myid" class="sr-only">test</label>
<input id="myid" type="text">
Will android/chrome read that?
(The "sr-only" class is used to visually hide the <label> but it's still available for screen readers to read. See What is sr-only in Bootstrap 3?)
I'd like to set text in a textarea or text input using different colors (one or the other is fine, I don't need both). Think of something like simple syntax highlighting. So, let's say I have some keywords defined. I'd like those words to be colored a different color as the user types into the textarea or text input
I understand this needs to be some combination of CSS, Javascript, and maybe some pixie dust. I wondering which direction I need to dig into to find out how this can be done.
Thank you
No, you can't do this in a textarea or text input. Any CSS text-related property will affect the whole text within the the textarea/input. You'll need an editable element or document to achieve syntax highlighting. Example (works in all recent browsers; the last major browser not to support contenteditable was Firefox 2.0):
<code contenteditable="true">
<span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</code>
Are you finding this?
Use jQuery.colorfy
Code:
https://github.com/cheunghy/jquery.colorfy
Demo:
http://cheunghy.github.io/jquery.colorfy/
Screencast:
https://www.youtube.com/watch?v=b1Lu_qKrLZ0
This can actually be done by using styling inside of the tag, this is a reference from one of my websites where i have done this
<input style="border-radius: 5px; background-color: #000000; color: #ff0000; border-color:
blue;" class="form-control" name="firstname" placeholder="What you were looking for?"
type="text"
required autofocus />
I'm trying to use the default date type in HTML5, but this is not fully supported by Safari and FireFox, my workaround using jQuery is also not working.
I have this in script.js
$(document).ready(function(){
if ( $('#date1').type != 'date' ) $('#date1').datepicker();
});
In the form, I have this:
<script src="js/script.js" type="text/javascript"></script>
<input id="date1" name="date1" required="required" type="date" value="MM/DD/YY"/>
When I load the page in Safari/Firefox, I see no error, I also inspect elements, no error.
What am I doing wrong?
JQuery has a .type function, however it is not being properly used in your example, nor is it relevant. What I believe you want is the element's type property, which can be achieved like so:
$(document).ready(function(){
if ( $('#date1').prop('type') != 'date' ) $('#date1').datepicker();
});
Here is a JSFiddle comparing .type to .prop('type'): https://jsfiddle.net/hczg6uyf/1/
Here is a JSFiddle of your fixed code, supplied by Tom in the comments below: https://jsfiddle.net/51wLrxy0/1/
Well after reading that this is not supported on Safari and IE , i got a work around that im happy with.
My problem is that on Safari i could not even click on the input field. So user cant even manually add a date, and if he could there was no placeholder text to tell him its a date input field.
My Sulotion:
Add a placeholder, chrome will ignore this. Then also add a min-height to the input and then on Safari i can at least see its a date input field and the user can add a date manually.
Code:
<input placeholder="Date" id="datetimepicker" type="date" name="calender" class="form-control" />
CSS:
input#datetimepicker {
min-height: 1px;
}
This is just a quick hack that worked for me as for the browsers that doesnt support type="date" .
I'm trying to make theme using Bootstrap and i'm having problems with textarea. it works fine in chrome and chrome based browsers but it looks odd and ugly in firefox. Here is a working fiddle (open in Firefox).
How do i fix it??? I want it to look normal. and i don't want to break anything else by fixing this.
<div>
<br />
<br />
<textarea id="s" type="text" name="s" value="Enter Text" ></textarea>
</div>
Add this to your css part:
textarea {
border: 1px solid #eee;
}
I have an input type="file" element with size="70" and width="522px". It looks and works fine in all browsers on Windows but in Firefox on Linux the input element is bigger than 522 pixels.
Things I tried:
max-width:522px but it doesn't work (Linux).
setting size="52" and min-width:522px; looks fine in Linux but doesn't work on in Firefox on Windows.
What can I do to specify 522 pixels width?
The problem is that the browser doesn't consider the button as part of the input. So if you have something like:
<div style="width: 500px; overflow: hidden">
<input type="file" id="uploadfile_0" class="fileinput" style="border: 2px solid #a9a9a9; width: 100%; height: 22px;" name="uploadfile_0"/>
</div>
The input button browse is outside the parent, and I don't think there is an easy solution to this.
You can read about styling input type="file" on quirksmode.org
Specify only CSS width, like this:
<input type="file" style="width: 522px;" ..... />
The only way that I've ever seen file input fields styled is through a trick where the field is actually on top of an image and the field is given zero opacity.
function inFil() {
var inFil = document.getElementById("inFil");
var iSize = inFil.files[0].size;
alert(iSize);
// where inFil is existing html tag <input type="button" id="inFil" >
}
Works with Firefox, but does not works with IE8, others not tested.