My checkbox and radio buttion is not being displayed in notepad++ - css

After I used the css downloaded from the website to style my website, my radio button is disappeared. After deleting css my radio button became visible.
What css should I change to make the radio button work.
Below are the code that i think are the errors.
I tryed to delete some classes, and think the below code causing the radio button to go missing suddenly:
input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
text-decoration: none;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 400;
padding-left: 2.4em;
padding-right: 0.75em;
position: relative;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
background: rgba(144, 144, 144, 0.25);
border-radius: 3px;
content: '';
display: inline-block;
height: 1.65em;
left: 0;
line-height: 1.58125em;
position: absolute;
text-align: center;
top: 0;
width: 1.65em;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
background: #2e3842;
color: #fff;
content: '\f00c';
}
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
box-shadow: 0 0 0 2px #21b2a6;
}
input[type="checkbox"] + label:before {
border-radius: 3px;
}
input[type="radio"] + label:before {
border-radius: 100%;
}

Below are code in php, not in cs.
My radio button and submit button and even the text which is update and delete cannot be displayed which is after ?> in the code
<form name="input" action="page4processupdate.php"method="post">
<?php
$seladmin= $_POST['fselect'];
{
$result = mysqli_query($connection,"SELECT * FROM Persons WHERE AdminNo = '".$seladmin."'" );
}
echo "<table border='1'><tr><th>Field</th><th>Value</th></tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr><td> Admin No</td><td><input type='text' name='uAdminNo' readonly='readonly' value='" . $row['AdminNo'] . "'></td></tr>";
echo "<tr><td> Address </td><td><input type='text' name='uAddress' value='". $row['Address'] . "'></td></tr>";
$fgender = $row['Gender'];
if ($fgender == "M")
{
echo "<tr><td> Gender </td><td>Male<input type='radio' name='uGender' value='M' checked>";
echo "Female<input type='radio' name='uGender' value='F'></td></tr>";
}
else
{
echo "<tr><td> Gender </td><td>Male<input type='radio' name='uGender' value='M'>";
echo "Female<input type='radio' name='uGender' value='F' checked></td></tr>";
}
echo "<tr><td> Email </td><td><input type='text' name='uEmail' value='". $row['Email'] . "'></td></tr>";
echo "<tr><td> Contact </td><td><input type='text' name='uContact' value='".$row['Contact'] . "'></td></tr>";
}
echo "</table>";
mysqli_close($connection);
?>
Update<input type='radio' name='fAction' value='Update' checked> <br/>
Delete<input type='radio' name='fAction' value='Delete'> <br/>
<input type="submit"value="Submit">
</form>

ty i found how to do i basically have to delete the entire code here, even if i remove the one you told me to remove it cannot work. so i basically remove the below code to make it work.
input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}

Related

Is this possible with contact form 7? - Have 2 different size texts as a title (label) with CSS?

Using Contact form 7, Is it possible to have my checkbox label (the title) in 2 different size texts with CSS?
Currently, it is: What You Are Interests? (select all that apply.)
font-size: 14px
I want to have is the following:
What You Are Interests? - as Size 14px
(select all that apply.) - as Size 10px
Check out the picture please See Picture Picture Is Here
the CSS Code I'm currently using for the contact form 7 checkbox
.wpcf7-form label {
color: white;
font-size: 14px;
}
/* custom checkbox styling for contact form 7 checkbox */
span.wpcf7-list-item {
display: inline-block;
margin: 0;
}
.wpcf7 .wpcf7-list-item {
display: block;
margin-bottom: 5px;
}
.wpcf7-checkbox label {
position: relative;
cursor: pointer;
margin-top: 5px
}
.wpcf7-checkbox input[type=checkbox] {
/*position: relative;*/
position: absolute;
visibility: hidden;
width: 30px;
height: 30px;
top: 0;
left: 0;
}
.wpcf7-checkbox input[type=checkbox] + span {
/* border: 3px solid red; */
}
.wpcf7-checkbox input[type=checkbox] + span:before {
display: block;
position: absolute;
content: '';
border-radius: 0;
height: 20px;
width: 20px;
top: 0px;
left: 0px;
border: 1px solid white;
}
.wpcf7-checkbox input[type=checkbox] + span:after {
display: block;
position: absolute;
content: "\2713";
height: 20px;
width: 20px;
top: 0;
left: 0;
visibility: hidden;
font-size: 18px;
text-align: center;
}
.wpcf7-checkbox input[type=checkbox]:checked + span:before {
background: transparent;
}
.wpcf7-checkbox input[type=checkbox]:checked + span:after {
visibility: visible;
}
.wpcf7-list-item-label {
margin-left: 40px;
display: inline-block;
}
[text* First-Name placeholder "First Name"]
[text* Last-Name placeholder "Last Name"]
[email* your-email placeholder "Email"]
[tel* tel-phone placeholder "Phone Number"]
[text* text-DOB placeholder "Date Of Birth (DD-MM-YYY)"]
[text* text-city placeholder "City / Town"]
[textarea* textarea-128 placeholder "Hello Learn To Fly USA, My current Experience level is ...., Hours many hours flown ...., I have Licenses or Qualifications etc"]
<label> What You Are Interests? (select all that apply.)
[checkbox* Q2Whatareyourinterests use_label_element "Training" "Employment" "Travel"]
<label> When Are You Ready?
[checkbox* Q3Whenareyouready use_label_element "As Soon As Possible" "Within 1 to 2 years" "Undecided"]
[submit "Send"]

Showed Checked Radio Button - Ninja Forms

I've made my radio buttons to full width, which wrap around the text, making entire text a radio button.
This is the code I used to make radio buttons look like buttons:
.list-checkbox-wrap .nf-field-element li label, .list-radio-wrap .nf-
field-element li label {
margin-left:0em;}
label.radio {
cursor: pointer;
}
label.radio input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
.list-checkbox-wrap .nf-field-element li label, .list-radio-wrap .nf-
field-element li label {
padding: 7px 14px;
border: 2px solid #EEE;
display: inline-block;
color: #009BA2;
border-radius: 3px;
text-transform: uppercase;
text-align:center;
}
input[type=checkbox], input[type=radio] {
visibility: hidden;
margin: 0;
width: 0!important;
}
input[type=checkbox] + label, input[type=radio] + label {
font-size: 16px;
}
input[type=checkbox] + label:hover, input[type=radio] + label:hover {
cursor: pointer; }
input[type=checkbox] + label:before, input[type=radio] + label:before{
font-family: "ETmodules";
font-size: 36px;
position: relative;
top: 0.3em;
margin-right: 0.2em;
}
However, I cannot manage to change border-color of box when radio button is selected.
html for radio buttons
<div class="nf-field-element"><ul aria-describedby="nf-error-37">
<li>
<input type="radio" id="nf-field-37-0" name="nf-field-37" class="ninja-forms-field nf-element nf-checked" value="Physical Product" aria-labelledby="nf-label-class-field-37-0">
<label for="nf-field-37-0" id="nf-label-class-field-37-0" class="nf-checked-label">Physical Product</label>
</li>
<li>
<input type="radio" id="nf-field-37-1" name="nf-field-37" class="ninja-forms-field nf-element" value="Digital Product" aria-labelledby="nf-label-class-field-37-1">
<label for="nf-field-37-1" id="nf-label-class-field-37-1" class="">Digital Product</label>
</li>
<li>
<input type="radio" id="nf-field-37-2" name="nf-field-37" class="ninja-forms-field nf-element" value="Subscription" aria-labelledby="nf-label-class-field-37-2">
<label for="nf-field-37-2" id="nf-label-class-field-37-2" class="">Subscription</label>
</li>
<li>
<input type="radio" id="nf-field-37-3" name="nf-field-37" class="ninja-forms-field nf-element" value="Service" aria-labelledby="nf-label-class-field-37-3">
<label for="nf-field-37-3" id="nf-label-class-field-37-3" class="">Service</label>
</li>
</ul></div>
this class is added to input when clicked
nf-checked
and this class is added to label when clicked
nf-checked-label
Found how to target the checked radio button css
input[type=radio]:checked + label {
...code here
}

replace checkbox with image, icon or background and keep functionality

I have a form with a checkbox.
I want the checkbox and label to be invisible and replace them with an icon.
I want the icon to have the functionality of the checkbox.
Instead of an icon I'm just using a background now. When I click the background I want the form to change color (by selecting the checkbox).
When I click again the form should return to it's regular color.
On my real form the checkbox applies a filter so I need the checkbox funtionality.
Can't really get any of it to work.
https://jsfiddle.net/rom6qr84/1/
.form-item-edit-how-40 {
display: inline-block;
padding: 20px;
width: 50px;
height: 50px;
background: yellow;
}
.form-item-edit-how-40:active,
.form-item-edit-how-40:hover {
background: red;
}
input:checked {
background: green;
}
input,
label {
//display: none;
//visibility: hidden;
}
label {
background: grey;
width: 50px;
height: 50px;
}
<div class="form-item-edit-how-40">
<input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT">
<label class="option" for="edit-how-40">Met de bus</label>
</div>
To get the result you're after, you'll need to change your HTML a little bit. You can't select parents in CSS (yet). And therefore you should use the "next sibling selector" (+). I've hidden the text in the label by putting it into a span. The label changes background color when the input[type="checkbox"] is checked, using the following selector: input:checked + label{}.
.form-item-edit-how-40 {
display: inline-block;
padding: 20px;
background: yellow;
}
.form-item-edit-how-40:active,
.form-item-edit-how-40:hover {
background: red;
}
input,
label span{
display: none;
visibility: hidden;
}
label {
display: block;
background: grey;
width: 50px;
height: 50px;
}
input:checked + label{
background: green;
}
<div class="form-item-edit-how-40">
<input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT">
<label class="option" for="edit-how-40">
<span>Met de bus</span>
</label>
</div>
There is no parent selector in CSS. see similar Questions
Change Html Code .Look Like This.
Live Demo Here
Snippet Example
.form-item-edit-how-40 {
display: inline-block;
padding: 20px;
width: 50px;
height: 50px;
background: yellow;
}
.form-item-edit-how-40:hover {
background: red;
}
input[type="checkbox"]:checked + .form-item-edit-how-40 {
background: green;
}
input,
label {
//display: none;
//visibility: hidden;
}
label {
background: grey;
width: 50px;
height: 50px;
}
c
<input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT" class="test">
<div class="form-item-edit-how-40">
<label class="option" for="edit-how-40">Met de bus</label>
</div>
I used to a label to get what you need and of course for now you can't in css get parent and change background. Regards and successful coding
.form-item-edit-how-40 {
display: inline-block;
padding: 20px;
width: 50px;
height: 50px;
/* background: yellow; */
position:relative;
}
.form-item-edit-how-40:active,
.form-item-edit-how-40:hover {
/* background: red; */
}
input,
label {
/*display: none;
visibility: hidden; */
}
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:-1;
outline:none;
background: yellow;
margin: 0;
}
input:checked {
background: green;
}
input:checked ~ label .fa:before {
content: "\f111";
}
label {
/* background: #808080; */
position: absolute;
top: 50%;
margin-top: -13px;
left: 50%;
margin-left: -13px;
padding: 3px 6px;
cursor:pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="form-item-edit-how-40">
<input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT">
<label class="option" for="edit-how-40"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
</div>

CSS - White box surrounding area

HTML & PHP:
function edds_credit_card_form( $echo = true ) {
global $edd_options;
if( edd_get_option( 'stripe_checkout', false ) ) {
return;
}
ob_start(); ?>
<?php if ( ! wp_script_is ( 'stripe-js' ) ) : ?>
<?php edd_stripe_js( true ); ?>
<?php endif; ?>
<?php do_action( 'edd_before_cc_fields' ); ?>
<fieldset id="edd_cc_fields" class="edd-do-validate">
<legend><?php _e( 'Credit Card Info', 'edds' ); ?></legend>
<?php if( is_ssl() ) : ?>
<div id="edd_secure_site_wrapper">
<span class="padlock"></span>
<span><?php _e( 'This is a secure SSL encrypted payment.', 'edds' ); ?></span>
</div>
<?php endif; ?>
<p id="edd-card-number-wrap">
<label for="card_number" class="edd-label">
<?php _e( 'Card Number', 'edds' ); ?>
<span class="edd-required-indicator">*</span>
<span class="card-type"></span>
</label>
<span class="edd-description"><?php _e( 'The (typically) 16 digits on the front of your credit card.', 'edds' ); ?></span>
<input type="tel" pattern="[0-9]{13,16}" autocomplete="off" id="card_number" class="card-number edd-input required" placeholder="<?php _e( 'Card number', 'edds' ); ?>" />
</p>
<p id="edd-card-cvc-wrap">
<label for="card_cvc" class="edd-label">
<?php _e( 'CVC', 'edds' ); ?>
<span class="edd-required-indicator">*</span>
</label>
<span class="edd-description"><?php _e( 'The 3 digit (back) or 4 digit (front) value on your card.', 'edds' ); ?></span>
<input type="tel" pattern="[0-9]{3,4}" size="4" autocomplete="off" id="card_cvc" class="card-cvc edd-input required" placeholder="<?php _e( 'Security code', 'edds' ); ?>" />
</p>
<p id="edd-card-name-wrap">
<label for="card_name" class="edd-label">
<?php _e( 'Name on the Card', 'edds' ); ?>
<span class="edd-required-indicator">*</span>
</label>
<span class="edd-description"><?php _e( 'The name printed on the front of your credit card.', 'edds' ); ?></span>
<input type="text" autocomplete="off" id="card_name" class="card-name edd-input required" placeholder="<?php _e( 'Card name', 'edds' ); ?>" />
</p>
<?php do_action( 'edd_before_cc_expiration' ); ?>
<p class="card-expiration">
<label for="card_exp_month" class="edd-label">
<?php _e( 'Expiration (MM/YY)', 'edds' ); ?>
<span class="edd-required-indicator">*</span>
</label>
<span class="edd-description"><?php _e( 'The date your credit card expires, typically on the front of the card.', 'edds' ); ?></span>
<select id="card_exp_month" class="card-expiry-month edd-select edd-select-small required">
<?php for( $i = 1; $i <= 12; $i++ ) { echo '<option value="' . $i . '">' . sprintf ('%02d', $i ) . '</option>'; } ?>
</select>
<span class="exp-divider"> / </span>
<select id="card_exp_year" class="card-expiry-year edd-select edd-select-small required">
<?php for( $i = date('Y'); $i <= date('Y') + 30; $i++ ) { echo '<option value="' . $i . '">' . substr( $i, 2 ) . '</option>'; } ?>
</select>
</p>
<?php do_action( 'edd_after_cc_expiration' ); ?>
</fieldset>
<?php
do_action( 'edd_after_cc_fields' );
$form = ob_get_clean();
if ( false !== $echo ) {
echo $form;
}
return $form;
}
add_action( 'edd_stripe_cc_form', 'edds_credit_card_form' );
CSS:
/*
/* Remove Page Header */
.page-id-1974 .leftside h1 {
display: none;
}
/* Remove Page Header */
.page-id-1974 .leftside h1 {
display: none;
}
/* Remove Content Box Padding */
.page-id-1974 .leftside {
padding: 0;
width: 620px;
}
/* Change Beat Store Height */
.page-id-1974 .mejs-playlist {
height: 600px !important;
margin-bottom: 0;
}
/* Top Header Color Black/Transparent */
.navigation_holder, .header_holder {
background-color: rgba(0,0,0,0.85);
}
/* Widget text and line colors */
.widget h3 {
/* color: #FFAE00; */
color: #FFFFFF;
}
.widget h3 {
font-size: 15px;
font-weight: bold;
/* color: #FFAE00; */
color: #FFFFFF;
width: 270px;
border-bottom-width: 3px;
border-bottom-style: double;
float: left;
border-bottom-color: #b50707;
padding-bottom: 5px;
margin-bottom: 10px;
}
/* Widget backround black/transparent */
.widget {
line-height: 20px;
font-size: 14px;
color: #ffffff;
/***** "color: " this changes beat buying steps color***********/
background-color: rgba(0,0,0,0.86);
float: left;
width: 270px;
margin-bottom: 15px;
box-shadow: 2px 1px 3px rgba(0,0,0,0.10);
-moz-box-shadow: 2px 1px 3px rgba(0,0,0,0.10);
-webkit-box-shadow: 2px 1px 3px rgba(0,0,0,0.10);
padding: 15px;
}
/* Main backround black/transparent */
#main {
margin-left: 10px;
background-color: rgba(0,0,0,0.83);
float: left;
box-shadow: 0 0 3px 1px rgba(0,0,0,0.10);
-moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.10);
-webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.10);
}
/* Main BeatStore backround black/transparent */
element.style {
top: 30px;
width: 100%;
height: 30px;
}
.page-id-14 .mejs-playlist {
height: 600px !important;
margin-bottom: 0;
}
.mejs-playlist {
height: 650px !important;
/* color: #FFAE00; */
color: #FFFFFF;
margin-bottom: 15px;
clear: both;
display: block;
float: left;
overflow-y: auto;
margin-top: 30px;
background: rgba(0,0,0,0.7);
}
/* Main BeatStore Orange Highlights and red lines */
element.style {
}
#main li {
padding-bottom: 8px;
line-height: 19px;
}
.button, .widget .edd_checkout, .mejs-controls
.mejstime-rail.mejs-time-loaded, a.edd-submit, li.cat-item:hover,
.tagcloud
a:hover, .mejs-playlist li.current, .mejs-playlist li:hover,
#primary_nav_wrap ulli:hover {
background-color: #ff7600 !important;
}
.mejs-playlist li:hover, .mejs-playlist li:hover span.genre,
.mejs- playlist li:hover .pltext, .mejs-playlist li:hover .fa {
color: #ffffff;
/*background-color: #0087bf;*/
}
.mejs-playlist li.current {
color: #ffffff;
}
.mejs-playlist li {
color: white;
overflow: hidden;
font-size: 16px;
list-style-type: none;
padding: 15px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #f50303;
min-height: 46px;
}
/*Content Header Colors*/
h1#content_header {
font-size: 33px;
font-weight: bold;
color: #ffae00;
border-bottom-width: 3px;
border-bottom-style: double;
border-bottom-color: #b50707;
padding-bottom: 15px;
margin-bottom: 15px;
}
element.style {
}
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
clear: both;
}
h1, h2, h3, h4, h5, h6, #content_header, .button, .widget .edd_checkout {
font-family: 'PT Sans';
}
h2 {
font-size: 30px;
line-height: 30px;
}
h1, h2, h3, h4, h5, h6 {
padding-bottom: 10px;
line-height: normal;
display: block;
/* color: #FFAE00; */
color: #FFFFFF;
font-weight: bold;
}
element.style {
}
#main li {
padding-bottom: 8px;
line-height: 19px;
}
#main li {
padding-bottom: 8px;
line-height: 19px;
}
.mejs-playlist li {
color: #fff;
overflow: hidden;
font-size: 16px;
list-style-type: none;
padding: 15px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #f50303;
min-height: 46px;
}
/* FROM HERE DOWN IS WHERE YOU NARROW DOWN THE OPACITY, IT'S LABELED
BELOW */
.mejs-playlist li.current {
/* background-color: #bf0101 !important;*/
background-color: rgba(193,1,1,0.5) !important;
opacity: .5;
/* OPACITY ADDED */
}
.mejs-playlist li.current:hover {
/* background-color: #bf0101 !important;*/
background-color: rgba(193,1,1,0.5) !important;
opacity: .5;
/* OPACITY ADDED */
}
.mejs-playlist li:hover {
/* background-color: #bf0101 !important;*/
background-color: rgba(193,1,1,0.5) !important;
opacity: .5;
/* OPACITY ADDED */
}
a:first-child {
color: red;
}
#main label, legend {
color: #FFAE00;
}
span.edd-cart-item-title {
color: #ffffff;
}
span.edd-payment-mode-label {
color: #FFAE00;
}
#edd-email-wrap > span:nth-child(2) {
color: #FFAE00;
}
#edd-first-name-wrap > span:nth-child(2) {
color: #FFAE00;
}
#edd-last-name-wrap > span:nth-child(2) {
color: #FFAE00;
}
#edd-card-country-wrap > span:nth-child(2) {
color: #FFAE00;
}
#edd-card-zip-wrap > span:nth-child(2) {
color: #FFAE00;
}
.edd_checkout_cart_item_title {
/* controls color of the text for the song title in the checkout */
color: #FFAE00;
}
/* Checkout table part 1 */
tr.edd_cart_header_row {
opacity: .5;
}
/* Checkout table part 2 */
tr.edd_cart_item {
opacity: .5;
}
#edd_cc_fields {
/* controls font color of the titles in "card info section" */
color: #FFAE00;
}
#edd_checkout_form_wrap > span.edd-description {
color: #FFAE00;
}
li.cart_item:nth-child(2) {
color: black;
}
#edd-remove-from-cart {
color: red;
}
#edd_remove_from_cart {
color: red;
}
th.edd_cart_actions {
color: #ffffff;
}
/***********************************************************/
#edd_checkout_cart th {
color: #FFAE00;
}
#edd_checkout_cart td {
background-color: #610202;
color: #FFAE00;
}
#edd_checkout_cart .edd_cart_header_row th {
background-color: #610202;
color: #FFAE00;
}/* #edd_discount_code { */
/* for some reason this will allow me to control opactiy, but not the
color? And it won't allow me to take the opacity past .5 (strange) */
/* background-color: #610202; */
/* opacity: .5; */
}
#edd-card-number-wrap, #edd-card-cvc-wrap, #edd-card-name-wrap,
.card- expiration, .edd_before_cc_fields, #edd_before_cc_fields {
background-color: #610202;
color: #FFAE00;
}
The issue I'm having is with the white border around the red section where the customer will be entering in their card details. I've tried everything that I can think of. I've tried adding a z-index. I've attempted to add a surrounding div tag and then apply css to it, but it didn't work. The white area still took precedence. I've tried to change the background of everything by using a "*" and even that didn't change the white section. If anyone can help, I'll greatly appreciate it. Thanks...
You can use the inspect tool in Chrome or Firefox by right clicking the element you want to view and clicking inspect. While inspecting your site, http://www.exiledgrounds.com/checkout/. I found that the white background was being caused by #edd_checkout_form_wrap fieldset#edd_cc_fields. I can't find that in your HTML or CSS, so it must be getting styled from another CSS stylesheet.
Once you find where it is you can just remove the background property or set it to the color you want.

jsf format selectOneRadio elements with different css

is there an option or a way to style the f:selectItems of a h:selectOneRadio with different styles? i want e.g. a red and a green highlighted radio-button
best regards
After a seargh on google I have found this :
HTML file:
<label for="radio1">label 1</label><span></span><input type="radio" id="radio1" name="myRadio" checked="checked"/><span></span>
<label for="radio2">label 2</label><span></span><input type="radio" id="radio2" name="myRadio" /><span></span>
<label for="radio3">label 3</label><span></span><input type="radio" id="radio3" name="myRadio" /><span></span>
<label for="radio4">label 4</label><span></span><input type="radio" id="radio4" name="myRadio" /><span></span>
CSS file:
span{
position: absolute;
right: 0;
width: 25px;
height: 25px;
line-height: 25px;
padding: 3px;
color: #FFF;
text-align: center;
background: #c06f59;
}
span:after{
content: "no"; /*if CSS are disbled span elements are not displayed*/
}
input{
position: absolute;
right: 0;
margin: 0;
width: 31px;
height: 31px;
/*hide the radio button*/
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
cursor: pointer;
}
input[type="radio"] + span{ /*the span element that immediately follow the radio button */
visibility: hidden; /*temporarily hide the "YES" label*/
background: #6EB558;
}
input[type="radio"] + span:after{
content: "yes"; /*if CSS are disbled span elements are not displayed*/
}
input[type="radio"]:checked + span{
visibility: visible; /*show the "YES" label only if the radio button is checked*/
}
Hope it helpes you!
Thx, but the problem is, there are no elements created when rendered.
i found the solution:
table.choices > tbody > tr:first-child input:checked + label{
background-color:#228b22;
color:#F7F7F7;
}
table.choices > tbody > tr:first-child + tr input:checked + label{
background-color:#800000;
color:#F7F7F7;
}

Resources