Question

HTML＆amp; 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;
}

我遇到的问题是红色部分周围的白色边框，客户将在其中输入卡片详细信息。我已经尝试了所有我能想到的东西。我试过添加一个z-index。我试图添加一个周围的div标签，然后将css应用于它，但它没有用。白色区域仍然优先。我试图通过使用“*”改变一切的背景，甚至没有改变白色部分。如果有人可以提供帮助，我将非常感激。谢谢......

Answer 1

您可以通过右键单击要查看的元素并单击inspect，在Chrome或Firefox中使用检查工具。在检查您的网站时http://www.exiledgrounds.com/checkout/。我发现白色背景是由#edd_checkout_form_wrap fieldset#edd_cc_fields.引起的，我无法在HTML或CSS中找到它，因此必须从另一个CSS样式表中设置样式。

找到它的位置后，您可以删除background属性或将其设置为您想要的颜色。

CSS - 白盒周边区域

1 个答案: