کاستومایز کردن استایل پیشفرض گرویتی فرمز

vahidtahmasebi

سلام محسن جان ، امیدوارم حالت عالی باشه

کلا Css کاستوم کردن کمی حساسه و باید بدونی چه زمانی از کد بالا تر استفاده کنی و برعکس

مثلا من میخوام به تگ اینپوت استایل بدم  ، یه راهکار اینکه من کلا تو فایل Style.css قالبم بگم تمام تگ های input این استایل رو داشته باشن اما یه زمانی هست میخوام خاص فقط برای input های گرویتی یه استایل داده بشه

برای مثال من میخوام UL زیر رو تغییر بدم

تگ UL من تو یه کلاس بالا دستی به نام (gform_body) قرار داره پس من باید بگم

gform_body > ul{}

چه استایل هایی داشته باشه
اگر به درستی سلسله مراتب کلاس بالا دستی رو رعایت کنید هیچ مشکلی نداری واسه استایل دادن

یه نمونه هم برات میزارم فرم تماس با ما سایت کارسازشو رو نگاه کنی کلا استایلش به همین شکل داده شده

<div class="gform_body"><ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below"><li id="field_1_8" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label gfield_label_before_complex">نام و نام خانوادگی<span class="gfield_required">*</span></label><div class="ginput_complex ginput_container no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name" id="input_1_8">
                            
                            <span id="input_1_8_3_container" class="name_first">
                                                    <input type="text" name="input_8.3" id="input_1_8_3" value="" aria-label="نام" aria-required="true" aria-invalid="false" placeholder="وحید" style="background-image: url(&amp;quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=&amp;quot;); cursor: auto;" class="">
                                                    <label for="input_1_8_3">نام</label>
                                                </span>
                            
                            <span id="input_1_8_6_container" class="name_last">
                                                    <input type="text" name="input_8.6" id="input_1_8_6" value="" aria-label="نام خانوادگی" aria-required="true" aria-invalid="false" placeholder="طهماسبی">
                                                    <label for="input_1_8_6">نام خانوادگی</label>
                                                </span>
                            
                        </div></li><li id="field_1_5" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_1_5">ایمیل خود را وارد نمایید.<span class="gfield_required">*</span></label><div class="ginput_container ginput_container_email">
                            <input name="input_5" id="input_1_5" type="email" value="" class="medium" aria-required="true" aria-invalid="false">
                        </div></li><li id="field_1_4" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_1_4">واحد مربوطه را انتخاب کنید<span class="gfield_required">*</span></label><div class="ginput_container ginput_container_select"><select name="input_4" id="input_1_4" class="medium gfield_select" aria-required="true" aria-invalid="false"><option value="واحد پشتیبانی">واحد پشتیبانی</option><option value="واحد فروش محصولات">واحد فروش محصولات</option><option value="واحد خدمات آنلاین">واحد خدمات آنلاین</option><option value="ارتباط با مدیر سایت">ارتباط با مدیر سایت</option></select></div></li><li id="field_1_3" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_1_3">توضیحات خود را برای واحد پشتیبانی بنویسید.<span class="gfield_required">*</span></label><div class="ginput_container ginput_container_textarea"><textarea name="input_3" id="input_1_3" class="textarea medium" aria-required="true" aria-invalid="false" rows="10" cols="50"></textarea></div></li><li id="field_1_7" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" style="display: none;"><label class="gfield_label" for="input_1_7">شناسه خرید خود را وارد نمایید<span class="gfield_required">*</span></label><div class="ginput_container ginput_container_text"><input name="input_7" id="input_1_7" type="text" value="" class="medium" aria-required="true" aria-invalid="false" disabled=""></div></li><li id="field_1_6" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" style="display: none;"><label class="gfield_label" for="input_1_6">توضیحات خود را برای واحد فروش محصولات وارد کنید<span class="gfield_required">*</span></label><div class="ginput_container ginput_container_textarea"><textarea name="input_6" id="input_1_6" class="textarea medium" aria-required="true" aria-invalid="false" rows="10" cols="50" disabled=""></textarea></div></li><li id="field_1_11" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" style="display: none;"><label class="gfield_label" for="input_1_11">ارتباط با واحد خدمات سایت<span class="gfield_required">*</span></label><div class="ginput_container ginput_container_textarea"><textarea name="input_11" id="input_1_11" class="textarea medium" aria-required="true" aria-invalid="false" rows="10" cols="50" disabled=""></textarea></div></li><li id="field_1_10" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" style="display: none;"><label class="gfield_label" for="input_1_10">به طور مستقیم با مدیر سایت...<span class="gfield_required">*</span></label><div class="ginput_container ginput_container_textarea"><textarea name="input_10" id="input_1_10" class="textarea medium" aria-required="true" aria-invalid="false" rows="10" cols="50" disabled=""></textarea></div></li><li id="field_1_12" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_1_12">کد امنیتی</label><div id="input_1_12" class="ginput_container ginput_recaptcha" data-sitekey="6LdxXK0UAAAAAPjEC0Tw6gfppZx-YUmGVyggI6Nn" data-theme="light" data-tabindex="0" data-badge=""><div style="width: 304px; height: 78px;"><div><iframe title="reCAPTCHA" src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;amp;k=6LdxXK0UAAAAAPjEC0Tw6gfppZx-YUmGVyggI6Nn&amp;amp;co=aHR0cHM6Ly9rYXJzYXpzaG8uY29tOjQ0Mw..&amp;amp;hl=en&amp;amp;v=sG0iO6gHcGdWJzjJjW9AY49S&amp;amp;theme=light&amp;amp;size=normal&amp;amp;cb=4k47l6be92r1" width="304" height="78" role="presentation" name="a-ihbflmnpehru" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea></div><iframe __idm_frm__="84" style="display: none;"></iframe></div></li>
                            </ul></div>

محسن ع

استاد دست گلت درد نکنه روشش رو فهمیدم الان و پیاده کردم کار کرد، خیلی رو مخ بود واقعا این مسئله

vahidtahmasebi

رو مخ نیست محسن جان ، هر چیزی در دنیای کد نویسی یه ترفندی داره که نیاز به تکرار و تمرینه

که شما پشت کارشو دارید

موفق باشی