IE8 not showing input type text - html

I'm facing an issue that IE8 doesn't show borders for input div. The input is in the page, I can click in it and write in it but it isn't visible(see screenshots).
IE8 screenshot
Chrome screenshot.
The second input is added dynamically via jQuery. How can I make the first input visible?
Code
<table id="footable">
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td><input type="text" class="fooClass"/></td><td><select class="course"><option value="-1" type=""></option></select></td></tr>
</table>
the fooClass doesn't have any style. I use it just as jQuery identifier.
I've already tried to add border: 1px solid black; to style attribute to the input but it didn't help...

Have you tried to define the outline? That maybe helps:
outline: 1px solid black;

Related

Unable to see entered text in the input field in IE11 browser

I'm using clarity ui framework for building the website. I have added some additional padding on top of the clarity ui input field. It's seems working in all browsers except in IE11 where I'm unable to see the entered text. What changes do I have to make in order for the text to appear in the input field?
Here is the stackblitz link to get access to the code
https://stackblitz.com/edit/clarity-forms-test-ea75jb?file=src%2Fapp%2Fapp.component.css
<div class="clr-control-container">
<div class="clr-input-wrapper">
<input type="text" id="example" placeholder="Example Input" class="clr-input">
</div>
</div>
Styles
input[type] {
background-color: grey;
padding: 21px 6px; //Adding padding is the reason causing the issue
color:white;
width: 100%;
margin-top: 5px;
}
Is there any workaround for this issue?
I try to check the code using developer tools and and I find that _ngcontent-c0 causing this issue.
If you remove it from the code than you can able to see the test in the text box in IE.

Disable input shadow CSS / HTML

When I click inside of an input box, I see the following "shadow":
Can this be disabled? If so, how?
EDIT:
GIF
And this is my code
<div class="col-xs-12"><input class="form-control" id="Password" name="Password" type="text" placeholder="Password" /></div>
I think you want to set 'outline: none' on the input css.
The question was answered there: How to remove the border highlight on an input text element
Set border to none or 0. Then for mozilla remove ghost padding.
.myInput {
border: 0;
}
.myInput::-moz-focus-inner {
border: 0;
padding: 0;
}
From the styling, it looks like you're using iOS.
Check out this thread Remove iOs input shadow.
It's a couple years old, but it might help.
I just put
border:none;
And worked, that blue border desapeared
Em maybe you can try to using outline:none,it will kill the the border when user click the input box

Setting color to inside area of a checkbox

I am trying to set color to the clickable area of a checkbox using an inline CSS. I am using the below code
<html>
<head>
<body bgcolor="green">
<input type="checkbox" name="ch01" id="ch01" style="background-color: #FFFFC7;">
</body>
</head>
</html>
But it does not work, I have searched on the Net and on SO also, but could not find a solution. Could someone please suggest a solution, as to how I could set the color to the clickable area of the checkbox? I am ok with a javascript solution as well.
I think this cannot be possible with background-color property.
But you can do this by background-image
Here is the link, which can help you.
http://jsfiddle.net/jtbowden/xP2Ns/
instant of using default checkbox input tag use Div
HTML
<div style="width:10px;height:10px;" class="unchkd">
</div>
Checkbox
Javascript
$('div').on('click',function(){
if ($(this).hasClass('unchkd')){
$(this).removeClass('unchkd').addClass('chkd');
}
else {
$(this).removeClass('chkd').addClass('unchkd');
}
});
CSS
.chkd{
background-color:Red
}
.unchkd{
background-color:white;
border: 1px solid black
}

How to style the border of a h:selectBooleanCheckbox?

How can I give the <h:selectBooleanCheckbox> a red border?
I tried it as follows, but the border doesn't appear at all.
<h:selectBooleanCheckbox style="border: 1px solid red;" />
try this one ,
<h:selectBooleanCheckbox id="deleSub" style="border-color:red;" value="#mobeeCustomerHome.deleteSubscription}" />
The JSF <h:selectBooleanCheckbox> generates a HTML <input type="checkbox"> element. The style of the HTML <input type="checkbox"> element is very strictly controlled by the specific webbrowser used by the client.
Using border works in Internet Explorer only and even then the appearance is ugly. There's some good padding between the box and the border. To get it to appear the way you want in other browsers you should be using outline instead.
<h:selectBooleanCheckbox style="outline: 1px solid red" />
Note that this does in turn not work in IE! You'd likely want to specify the both CSS properties if you want to have a red border across all browsers.
<h:selectBooleanCheckbox style="border: 1px solid red; outline: 1px solid red" />
Please note that this is completely unrelated to JSF. It's a pure HTML/CSS matter. JSF is merely a HTML code generator. The problem ultimately boils down to the styleability of a HTML <input type="checkbox"> element.
A completely different alternative is to go for a 3rd party JSF component library which allows more fine grained control over the UI, such as PrimeFaces. See also the <p:selectBooleanCheckbox> showcase. It's using jQuery UI (with CSS themeroller!) under the covers.
This has more the to due with the HTML checkbox itself rather than the JSF tag.
See post: How to change checkbox's border style in CSS?
You could try:
outline: 1px solid red;
-moz-appearance: none;
This gets part of the way I think your looking for in FF it does nothing in IE8 (border does nothing in IE8 either). I haven't tested any other browsers.

how to add space between textbox and browse button for input file type

Can we add space between the browse button and textbox for input type file ?Is that possible? Aslo can i add border color for the same textbox ?
thanks,
michaeld
Increasing spacing is not possible. Generally speaking, styling an input type="file" is extremely difficult. If you check cross-browser, you can see that different browsers render it differently. The only way to style it is to fake another element as input type="file"
Example: http://www.quirksmode.org/dom/inputfile.html
You should use css to do this:
Your html:
<input type="text" class="yourclass" name="yourname" />
<input type="submit" />
your css:
<style> input.yourclass { border:1px solid red; margin-right: 10px;} </style>
Hope this puts you in the right direction
It is working for me in Chrome.
input.file {
text-indent: initial;
}