CSS - ホワイトボックス周辺地域

Question

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; 
} 

私がいる問題は、どこ赤い部分の周りに白のボーダーであります顧客はカードの詳細情報を入力します。私は考えることができるすべてを試しました。 z-indexを追加しようとしました。周囲のdivタグを追加してCSSを適用しようとしましたが、動作しませんでした。白い部分が依然として優先されました。私は "*"を使用してすべての背景を変更しようとしましたが、それでも白い部分は変更されませんでした。誰かが助けることができれば、私はそれを高く評価します。ありがとう...

Answer 1

ChromeまたはFirefoxで検査ツールを使用するには、表示する要素を右クリックしてinspectをクリックします。あなたのサイトを調べているうちに、http://www.exiledgrounds.com/checkout/。白い背景が原因であることが判明しました#edd_checkout_form_wrap fieldset#edd_cc_fields.あなたのHTMLやCSSでそれを見つけることができないので、別のCSSスタイルシートからスタイルを設定する必要があります。

場所を見つけたらbackgroundプロパティを削除するか、目的の色に設定します。