How to style the border of a h:selectBooleanCheckbox? - html

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.

Related

How to make content change per click on a button without loading a new page

Pretty sure its a dumb question but after a long search i didnt find anything.
While browsing the League of Legends page i noticed something i would like to replicate on my own page.
link:http://na.leagueoflegends.com/en/page/champion-reveal-illaoi-kraken-priestess
In the middle of the page there is a video and text beneath, it also shows 5 buttons everyone of them represents another video and a text. If you press one of the buttons the text and video changes smoothly but it doesn't load a new page or anything. How is this achieved iam not getting it out of the source code. I hope somebody can help. Is this achievable without Javascript?
Does somebody know a tutorial which deals with that?
Thanks for help.
Edit: Maybe if this question is inapproriate for this forum is there some kind of webdesign forum for stupid beginner questions?
There are a variety of ways.
The link you provided does so with Javascript.
While Javascript likely provides the most robust method / functionality - and since you asked if there is a pure CSS way, I wanted to share with you this pure CSS / HTML way. Here is an example: Fiddle Example
HTML:
<div>
<label for="content1">First Button Text Here</label>
<input id="content1" type="radio" name="content">
<div>
This is my content.
</div>
</div>
<div>
<label for="content2">Second Button Text Here</label>
<input id="content2" type="radio" name="content">
<div>
This is my alternate content.
</div>
</div>
<div>
<label for="content3">Third Button Text Here</label>
<input id="content3" type="radio" name="content">
<div>
This is my third set of content.
</div>
</label>
</div>
CSS:
label {
display: inline-block;
color: white;
background: #009;
padding: 5px 10px;
border: 1px solid black;
margin: 10px 0 0 0;
}
input {
display: none;
}
input + div {
display: none;
border: 1px solid blue;
padding: 20px;
}
input:checked + div {
display: block;
}
IMPORTANT THINGS to watch for
This markup will not work unless the following items are in place:
1. The labels for the radio button has a for attribute that matches exactly the id attribute of the radio buttons. The label does not have to be next to the button, but could be separate as needed to get the layout desired.
2. The div that contains the content must be immediately after the input. There cannot be any elements between them.
And, as a side-note, the div that contains the content can, if you like, contain a variety of rich markup to display sophisticated html such as images, tables, video embeds, etc.
IT would be nice if you could provide a link as an example (or at least images). But what you are describing can be achieved pretty simply by using jQuery and it's .show() and .hide() functions. Doing so, you can just create DOM elements you want (e.g. divs, videos, images, ...) and hide or show themn through jQuery.
Here a little example (to be honest, it's not the most fanciest one, but it works).
https://jsfiddle.net/fuzkoewj/

Form within a non-white background strange borderrs

Within a div with a non-white background, when I add an input element it gives me this ugly border.
<div class="input-group">
<input type="search" style="height:30px;">
</div>
What can I do to get rid of it?
That is unusual... what browser are you using to view this? Do you have a source page you can show us? I'm wondering whether it's a browser-defined default, or you have some other CSS causing this.
Regardless, there is a simple answer to this: Set your own border.
Like so:
<div class="input-group">
<input type="search" style="height:30px; border: 1px inset grey;">
</div>
You can also use this instead if you want iPhones to render the exact same border too (Apple devices like to style things their own way and this will override that):
<div class="input-group">
<input type="search" style="height:30px; border: 1px inset grey; -webkit-appearance: none;">
</div>
I would still recommend posting a link to a real example (perhaps on jsfiddle.net), just so we can verify what's causing the border issue. There are several possible reasons, though the above code should solve the most common ones.

IE8 not showing input type text

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;

image border not displaying html email

I am trying to send an html email with an image border as
<p align="center">
<img src="images/pic1.jpg" width="443" height="148" align="middle"
style="border: 1px solid grey; padding:10px;" border="1"/>
</p>
However, the border just does not display in any of the email clients. How can i fix this?
Main problem is Microsoft Outlook, enclosing the image in a table seems to do the job.
It's a hassle to enclose every image, but dats em breaks:
<p align="center">
<table><tr><td style="border: 1px solid grey;">
<img src="images/pic1.jpg" width="443" height="148" align="middle"
style="padding:10px;"/>
</td></tr></table>
</p>
To be honest your in for a hard time using "p" tags. Tables will 100% be the way to go in this situation. I know I know, tables blow, but for email clients that use word as their html render cough outlook cough and ones like hotmail and gmail running html 1 (this might be a little bit of a strech but its somewhere around there), you never really know how things are going to turn out.
As for an answer to your question, try display:block on your image. Generally you want to put display:block on all your images as well as heights and width to insure there are no weird gaps between image slices.
According to this: http://www.campaignmonitor.com/css/ border should be working properly.
I would try two things:
First add the following to the image, which will also help with Gmail rendering bugs
display:block;
And also, maybe try:
border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
a little bit off topic but mailchimp has a great tool for translating a normal HTML layout with seperate CSS classes into an inline CSS version
http://beaker.mailchimp.com/inline-css
and also a great tutorial how to code HTML emails the right way
http://kb.mailchimp.com/article/how-to-code-html-emails/
and regarding your CSS problem.
Try wrapping the image in a table cell and give the cell the border.
Unfortunately with HTML E-mails, tables are your friend, yet again.
Have fun
try changing the color either to it's value, #808080 or it's properly spelled version 'gray'

How to change background color of readonly textbox in css

How to change background color of readonly textbox in css
There are too many unkowns in your question. Which browser do you want support? If you say textbox you seem to use ASP.NET, but there is no tag at you question.
Generally said, the behaviour between the browsers are different.
Consider the following html
<html>
<head>
</head>
<body>
<input type="text" disabled="disabled" value="This is a test" style="background-color:Black; color:Lime;" />
</body>
</html>
IE8 renders the background color properly, but disabled controls will always have gray text with shadows. Mozille Firefox beside that renders the control correct and i am sure there will be difference all over the different browsers and even between the browser versions (IE6 would interprete the color values correctly too).
If you want to have a html regardless which browser you use, you have to use a span or other inline element, to format it with border and colors you want, instead of using a input element.
You could use
input[disabled="disabled"] { background:url("url-to-background-image.jpg") no-repeat #fff; }
and for older browser that doesnt support this selector, you can use jQuery to apply a class
$(document).ready(function() {
$("input[disabled="disabled"]").addClass('disabled');
});
And unless it's disabled all the time, you should provide js for removing the class along with js for enabling it.
you can try this
input:-moz-read-only { /* For Firefox */
background-color: yellow;
}
input:read-only {
background-color: yellow;
}
Hi This will surely work for your code. Just try this..
<html>
<head>
</head>
<body>
<input type="text" disabled="disabled" value="JavaScript is the best" style="background-color:Black; color:green;" />
</body>
You can change the background color in css using this code but before that make sure your html page is linked with your css page.
Body {
Background-color: red;
}
Hope this code will work for you.