Okay
  Public Ticket #1963489
font color checkbox/radio
Closed

Comments

  • Niels Beuker started the conversation

    Hi,

    I would like to change the font color next to the checkbox and radio buttons. Somehow I can't do it with any of these css 

    .wpcf7-checkbox input[type="checkbox"] span
    
    .wpcf7-form p span
    .wpcf7-checkbox .wpcf7-list-item-label

    even tried this one:

    #wpcf7-f6-p6312-o1 form > div > p:nth-child(2) > span > span > span> label span


    Thanks

  •   Andrew replied privately
  • Niels Beuker replied

    Hi Andrew,

    thank you for you help. I have added the code into the css. And now the radio buttons and checkboxed have the new color on mouse-over. But you have added a lot of classes and id's to the code. I have 'unmimified' it:

    #header-outer:not([data-lhe="animated_underline"]) header#top nav > ul > li > a:hover, 
    #header-outer:not([data-lhe="animated_underline"]) header#top nav .sf-menu > li.sfHover > a, 
    header#top nav > ul > li.button_bordered > a:hover, 
    #header-outer:not([data-lhe="animated_underline"]) header#top nav .sf-menu li.current-menu-item > a, 
    header#top nav .sf-menu li.current_page_item > a .sf-sub-indicator i, 
    header#top nav .sf-menu li.current_page_ancestor > a .sf-sub-indicator i, 
    #header-outer:not([data-lhe="animated_underline"]) header#top nav .sf-menu li.current_page_ancestor > a, 
    #header-outer:not([data-lhe="animated_underline"]) header#top nav .sf-menu li.current-menu-ancestor > a, 
    #header-outer:not([data-lhe="animated_underline"]) header#top nav .sf-menu li.current_page_item > a, 
    body header#top nav .sf-menu li.current_page_item > a .sf-sub-indicator [class^="icon-"], 
    header#top nav .sf-menu li.current_page_ancestor > a .sf-sub-indicator [class^="icon-"], 
    .sf-menu li ul li.sfHover > a .sf-sub-indicator [class^="icon-"], 
    #header-outer:not(.transparent) #social-in-menu a i:after, 
    .testimonial_slider[data-rating-color="accent-color"] .star-rating .filled:before, 
    ul.sf-menu > li > a:hover > .sf-sub-indicator i, 
    ul.sf-menu > li > a:active > .sf-sub-indicator i, 
    ul.sf-menu > li.sfHover > a > .sf-sub-indicator i, 
    .sf-menu ul li.current_page_item > a, .sf-menu ul li.current-menu-ancestor > a, 
    .sf-menu ul li.current_page_ancestor > a, 
    .sf-menu ul a:focus, 
    .sf-menu ul a:hover, .sf-menu ul a:active, .sf-menu ul li:hover > a, 
    .sf-menu ul li.sfHover > a, 
    .sf-menu li ul li a:hover, 
    .sf-menu li ul li.sfHover > a, 
    #footer-outer a:hover, 
    .recent-posts .post-header a:hover, 
    article.post .post-header a:hover, 
    article.result a:hover, article.post .post-header h2 a, 
    .single article.post .post-meta a:hover, 
    .comment-list .comment-meta a:hover, 
    label span, 
    .wpcf7-form p span, 
    .icon-3x[class^="icon-"], 
    .icon-3x[class*=" icon-"], 
    .icon-tiny[class^="icon-"], 
    body .circle-border, 
    article.result .title a, 
    .home .blog-recent:not([data-style="list_featured_first_row"]) .col .post-header a:hover, 
    .home .blog-recent .col .post-header h3 a, 
    #single-below-header a:hover, 
    header#top #logo:hover, .sf-menu > li.current_page_ancestor > a > .sf-sub-indicator [class^="icon-"], 
    .sf-menu > li.current-menu-ancestor > a > .sf-sub-indicator [class^="icon-"], 
    body #mobile-menu li.open > a [class^="icon-"], 
    .pricing-column h3, .pricing-table[data-style="flat-alternative"] .pricing-column.accent-color h4, 
    .pricing-table[data-style="flat-alternative"] .pricing-column.accent-color .interval, .comment-author a:hover, 
    .project-attrs li i, #footer-outer #copyright li a i:hover, 
    .col:hover > [class^="icon-"].icon-3x.accent-color.alt-style.hovered, 
    .col:hover > [class*=" icon-"].icon-3x.accent-color.alt-style.hovered, 
    #header-outer .widget_shopping_cart .cart_list a, 
    .woocommerce .star-rating, .woocommerce form .form-row .required, 
    .woocommerce-page form .form-row .required, 
    body #header-secondary-outer #social a:hover i, 
    .woocommerce ul.products li.product .price, 
    body .twitter-share:hover i, 
    .twitter-share.hovered i, body .linkedin-share:hover i, 
    .linkedin-share.hovered i, body .google-plus-share:hover i, 
    .google-plus-share.hovered i, 
    .pinterest-share:hover i, 
    .pinterest-share.hovered i, 
    .facebook-share:hover i, .facebook-share.hovered i, 
    .woocommerce-page ul.products li.product .price, 
    .nectar-milestone .number.accent-color, 
    header#top nav > ul > li.megamenu > ul > li > a:hover, 
    header#top nav > ul > li.megamenu > ul > li.sfHover > a, 
    body #portfolio-nav a:hover i, span.accent-color, .nectar-love:hover i, 
    .nectar-love.loved i, 
    .portfolio-items .nectar-love:hover i, 
    .portfolio-items .nectar-love.loved i, 
    body .hovered .nectar-love i,
    header#top nav ul #nectar-user-account a:hover span, 
    header#top nav ul #search-btn a:hover span, 
    header#top nav ul .slide-out-widget-area-toggle a:hover span, 
    body:not(.material) #search-outer #search #close a span:hover, 
    .carousel-wrap[data-full-width="true"] .carousel-heading a:hover i,
    #search-outer .ui-widget-content li:hover a .title, #search-outer .ui-widget-content .ui-state-hover .title, 
    #search-outer .ui-widget-content .ui-state-focus .title, 
    .portfolio-filters-inline .container ul li a.active, 
    body [class^="icon-"].icon-default-style, .single-post #single-below-header.fullscreen-header .icon-salient-heart-2, 
    .svg-icon-holder[data-color="accent-color"], 
    .team-member a.accent-color:hover, .ascend .comment-list .reply a, 
    .wpcf7-form .wpcf7-not-valid-tip, .text_on_hover.product .add_to_cart_button, 
    .blog-recent[data-style="minimal"] .col > span, 
    .blog-recent[data-style="title_only"] .col:hover .post-header .title, 
    .woocommerce-checkout-review-order-table .product-info .amount, 
    .tabbed[data-style="minimal"] > ul li a.active-tab, 
    .masonry.classic_enhanced article.post .post-meta a:hover i, 
    .blog-recent[data-style*="classic_enhanced"] .post-meta a:hover i, 
    .blog-recent[data-style*="classic_enhanced"] .post-meta .icon-salient-heart-2.loved, 
    .masonry.classic_enhanced article.post .post-meta .icon-salient-heart-2.loved, .single #single-meta ul li:not(.meta-share-count):hover i, 
    .single #single-meta ul li:not(.meta-share-count):hover a, 
    .single #single-meta ul li:not(.meta-share-count):hover span, 
    .single #single-meta ul li.meta-share-count .nectar-social a:hover i, 
    #project-meta #single-meta ul li > a, #project-meta ul li.meta-share-count .nectar-social a:hover i, 
    #project-meta ul li:not(.meta-share-count):hover i, 
    #project-meta ul li:not(.meta-share-count):hover span, 
    div[data-style="minimal"] .toggle:hover h3 a, 
    div[data-style="minimal"] .toggle.open h3 a, 
    .nectar-icon-list[data-icon-style="border"][data-icon-color="accent-color"] .list-icon-holder[data-icon_type="numerical"] span, 
    .nectar-icon-list[data-icon-color="accent-color"][data-icon-style="border"] .content h4, body[data-dropdown-style="minimal"] #header-outer .woocommerce.widget_shopping_cart .cart_list li a.remove, 
    body[data-dropdown-style="minimal"] #header-outer .woocommerce.widget_shopping_cart .cart_list li a.remove, 
    .post-area.standard-minimal article.post .post-meta .date a, 
    .post-area.standard-minimal article.post .post-header h2 a:hover, 
    .post-area.standard-minimal article.post .more-link:hover span, 
    .post-area.standard-minimal article.post .more-link span:after, 
    .post-area.standard-minimal article.post .minimal-post-meta a:hover, 
    body #pagination .page-numbers.prev:hover, 
    body #pagination .page-numbers.next:hover, 
    html body .woocommerce-pagination a.page-numbers:hover, 
    body .woocommerce-pagination a.page-numbers:hover, 
    body #pagination a.page-numbers:hover, 
    .nectar-slide-in-cart .widget_shopping_cart .cart_list a, 
    .sf-menu ul li.open-submenu > a, .woocommerce p.stars a:hover, 
    .woocommerce .material.product .product-wrap .product-add-to-cart a:hover, 
    .woocommerce .material.product .product-wrap .product-add-to-cart a:hover > span, 
    .woocommerce-MyAccount-navigation ul li.is-active a:before, .woocommerce-MyAccount-navigation ul li:hover a:before, 
    .woocommerce.ascend .price_slider_amount button.button[type="submit"], 
    html .ascend.woocommerce #sidebar div ul li a:hover, html .ascend.woocommerce #sidebar div ul li.current-cat > a, 
    .woocommerce .widget_layered_nav ul li.chosen a:after, .woocommerce-page .widget_layered_nav ul li.chosen a:after, 
    [data-style="list_featured_first_row"] .meta-category a, body[data-form-submit="see-through"] input[type=submit], 
    body[data-form-submit="see-through"] button[type=submit], #header-outer[data-format="left-header"] .sf-menu .sub-menu .current-menu-item > a, 
    .nectar_icon_wrap[data-color="accent-color"] i, 
    .nectar_team_member_close .inner:before, 
    body[data-dropdown-style="minimal"]:not([data-header-format="left-header"]) header#top nav > ul > li.megamenu > ul > li > ul > li.has-ul > a:hover, 
    body:not([data-header-format="left-header"]) header#top nav > ul > li.megamenu > ul > li > ul > li.has-ul > a:hover, 
    .masonry.material .masonry-blog-item .meta-category a, 
    .post-area.featured_img_left .meta-category a, 
    body[data-dropdown-style="minimal"] #header-outer:not([data-format="left-header"]) header#top nav > ul > li.megamenu ul ul li.current-menu-item.has-ul > a, 
    body[data-dropdown-style="minimal"] #header-outer:not([data-format="left-header"]) header#top nav > ul > li.megamenu ul ul li.current-menu-ancestor.has-ul > a, 
    body .wpb_row .span_12 .portfolio-filters-inline[data-color-scheme="accent-color-underline"].full-width-section a.active, 
    body .wpb_row .span_12 .portfolio-filters-inline[data-color-scheme="accent-color-underline"].full-width-section a:hover, 
    .material .comment-list .reply a:hover, 
    .related-posts[data-style="material"] .meta-category a, body[data-dropdown-style="minimal"].material:not([data-header-color="custom"]) #header-outer:not([data-format="left-header"]) header#top nav >ul >li:not(.megamenu) ul.cart_list a:hover, 
    body.material #header-outer:not(.transparent) .cart-outer:hover .cart-menu-wrap .icon-salient-cart, .material .widget li:not(.has-img) a:hover .post-title, 
    .material #sidebar .widget li:not(.has-img) a:hover .post-title, 
    .material .container-wrap #author-bio #author-info a:hover, 
    .material #sidebar .widget ul[data-style="featured-image-left"] li a:hover .post-title, body.material .tabbed[data-color-scheme="accent-color"][data-style="minimal"]:not(.using-icons) >ul li:not(.cta-button) a:hover, 
    body.material .tabbed[data-color-scheme="accent-color"][data-style="minimal"]:not(.using-icons) >ul li:not(.cta-button) a.active-tab, body.material .widget:not(.nectar_popular_posts_widget):not(.recent_posts_extra_widget) li a:hover, 
    .material .widget .tagcloud a, 
    .material #sidebar .widget .tagcloud a, 
    .single.material .post-area .content-inner > .post-tags a, 
    .tabbed[data-style*="material"][data-color-scheme="accent-color"] ul.wpb_tabs_nav li a:not(.active-tab):hover, 
    body.material .nectar-button.see-through.accent-color[data-color-override="false"], div[data-style="minimal_small"] .toggle.accent-color > h3 a:hover,
    div[data-style="minimal_small"] .toggle.accent-color.open > h3 a, 
    .nectar_single_testimonial[data-color="accent-color"] p span.open-quote, 
    .nectar-quick-view-box .star-rating, .minimal.product .product-wrap .normal.icon-salient-cart[class*=" icon-"], 
    .minimal.product .product-wrap i, .minimal.product .product-wrap .normal.icon-salient-m-eye, 
    .woocommerce-account .woocommerce > #customer_login .nectar-form-controls .control.active, 
    .woocommerce-account .woocommerce > #customer_login .nectar-form-controls .control:hover, 
    .products li.product.minimal .product-add-to-cart .loading:after, 
    .widget_search .search-form button[type=submit] .icon-salient-search, body.search-no-results .search-form button[type=submit] .icon-salient-search, .woocommerce #review_form #respond p.comment-notes span.required, 
    .nectar-icon-list[data-icon-color="accent-color"] .nectar-icon-list-item .list-icon-holder[data-icon_type="numerical"] {
        /*your color code*/
        color: #e52a30!important;
    }
    

    Then I removed everything but these lines:

    .wpcf7-form p span, 
    .icon-3x[class^="icon-"], 
    .icon-3x[class*=" icon-"], 
    .icon-tiny[class^="icon-"], 
    body .circle-border {
        color: #e52a30!important;
    }
    

    It is still working, but I don't understand why it only changes color on hover.

    Thanks

  •  8,994
    Tahir replied

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .wpcf7-form p span {
        color: #33cccc !important;
    }

    Thanks


    ThemeNectar Support Team 

  • Niels Beuker replied

    Hi Tahir,

    Your cleaner code works nicely. Weird because I tried that already earlier. But hey, if it works it works ;)