رفتن به مطلب

مخفی کردن بخشی از دکمه رادیویی در css


پست های پیشنهاد شده

با عرض سلام و احترام
بنده همچین دکمه رادیویی رو دارم:
 

<ul id="radio">
	<li class="radio-1">
      <p id="text"></p>
				</li>
	<li class="radio-2">
      <p id="text"></p>
				</li>
	<li class="radio-3">
      <p id="text"></p>
				</li>
</ul>


امکانش هست با css آیدی text رو از دکمه 2 رادیو مخفی کرد ؟ با همچین چیزی:

 

.radio-2 li input[type=radio]:checked~label #text{
    display:none !important;
}

ممنون میشم اگر امکان مخفی سازیش با css هست کد صحیح css رو بفرمایید.

ویرایش شده توسط am-in
لینک به ارسال

سلام به انجمن خوش آمدید

کد html با css مطابقت نداره اینجا اصلا input[type=radio] ندارید که بخواید از :checked استفاده کنید

.radio-2 li این هم باید به این شکل تغییر کنه li.radio-2 کد شما اینطور چیزی میشه

<div class="radio">
  <input type="radio" name="radio" class="radiobtn" id="radio-1">
  <label for="radio-1">Radio 1</label><br>
  <input type="radio" name="radio" class="radiobtn" id="radio-2">
  <label for="radio-2">Radio 2</label><br>
  <input type="radio" name="radio" class="radiobtn" id="radio-3">
  <label for="radio-3">Radio 3</label>
</div>

css

.radiobtn:checked + label{
  display:none;
}

 

لینک به ارسال
در ۱ ساعت قبل، asadiy4n گفته است :

سلام به انجمن خوش آمدید

کد html با css مطابقت نداره اینجا اصلا input[type=radio] ندارید که بخواید از :checked استفاده کنید

.radio-2 li این هم باید به این شکل تغییر کنه li.radio-2 کد شما اینطور چیزی میشه


<div class="radio">
  <input type="radio" name="radio" class="radiobtn" id="radio-1">
  <label for="radio-1">Radio 1</label><br>
  <input type="radio" name="radio" class="radiobtn" id="radio-2">
  <label for="radio-2">Radio 2</label><br>
  <input type="radio" name="radio" class="radiobtn" id="radio-3">
  <label for="radio-3">Radio 3</label>
</div>

css


.radiobtn:checked + label{
  display:none;
}

 

 

خیلی ممنون
در اصل کد من همچین چیزیه فقط برای ساده کردنش به اون شکل نوشتم. (کدهای افزونه restrict content pro)

 

<fieldset class="rcp_subscription_fieldset">
						<p class="rcp_subscription_message">سطح اشتراک خود را انتخاب کنید</p>
				<ul id="rcp_subscription_levels">
											<li class="rcp_subscription_level rcp_subscription_level_1">
					<input type="radio" id="rcp_subscription_level_1" class="required rcp_level" checked="checked" name="rcp_level" rel="35000" value="1" />
					<label for="rcp_subscription_level_1">
						<span class="rcp_subscription_level_name">اشتراک 1 ماهه</span><span class="rcp_separator">&nbsp;-&nbsp;</span><span class="rcp_price" rel="35000">35000 تومان</span><span class="rcp_separator">&nbsp;-&nbsp;</span>
						<span class="rcp_level_duration">30 روز</span>
												<div class="rcp_level_description">50,000 تومان</div>
					</label>

				</li>
															<li class="rcp_subscription_level rcp_subscription_level_3">
					<input type="radio" id="rcp_subscription_level_3" class="required rcp_level"  name="rcp_level" rel="199000" value="3" />
					<label for="rcp_subscription_level_3">
						<span class="rcp_subscription_level_name">اشتراک 1 ساله</span><span class="rcp_separator">&nbsp;-&nbsp;</span><span class="rcp_price" rel="199000">199000 تومان</span><span class="rcp_separator">&nbsp;-&nbsp;</span>
						<span class="rcp_level_duration">365 روز</span>
												<div class="rcp_level_description">240,000 تومان</div>
					</label>

				</li>
															<li class="rcp_subscription_level rcp_subscription_level_2">
					<input type="radio" id="rcp_subscription_level_2" class="required rcp_level"  name="rcp_level" rel="70000" value="2" />
					<label for="rcp_subscription_level_2">
						<span class="rcp_subscription_level_name">اشتراک 3 ماهه</span><span class="rcp_separator">&nbsp;-&nbsp;</span><span class="rcp_price" rel="70000">70000 تومان</span><span class="rcp_separator">&nbsp;-&nbsp;</span>
						<span class="rcp_level_duration">90 روز</span>
												<div class="rcp_level_description">90,000 تومان</div>
					</label>

				</li>
									</ul>
		</fieldset>

		<fieldset class="rcp_discounts_fieldset">
		<p id="rcp_discount_code_wrap">
			<label for="rcp_discount_code">
				کد تخفیف: 
				<span class="rcp_discount_valid" style="display: none;">معتبر</span>
				<span class="rcp_discount_invalid" style="display: none;">نامعتبر</span>
			</label>
			<span class="rcp_discount_code_field_wrap">
				<input type="text" id="rcp_discount_code" name="rcp_discount" class="rcp_discount_code" value=""/>
				<button class="rcp_button" id="rcp_apply_discount">اعمال</button>
			</span>
		</p>
	</fieldset>

 

که میخوام کلا بخش وارد کردن کد تخفیف وقتی اشتراک 1 ساله انتخاب شد نمایش داده بشه و تو 2 تا اشتراک دیگه نمایش داده نشه
کلاس اشتراک 1 ساله اینه
 

rcp_subscription_level_3

تشکر

لینک به ارسال

لطفا برای ارسال دیدگاه وارد شوید

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



ورود به حساب کاربری
×
×
  • اضافه کردن...