كيف يمكنني طراز (css) أزرار الراديو و العلامات ؟

Question

نظرا كود رفع الصوت عاليا ، كيف نمط أزرار الراديو أن تكون بجانب التسميات و نمط التسمية من اختيار زر الراديو بشكل مختلف عن غيرها من العلامات ؟

<link href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet">
<link href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" rel="stylesheet">

<div class="input radio">
  <fieldset>
    <legend>What color is the sky?</legend>
    <input type="hidden" name="color" value="" id="SubmitQuestion" />
    <input type="radio" name="color" id="SubmitQuestion1" value="1"  />
    <label for="SubmitQuestion1">A strange radient green.</label>
    <input type="radio" name="color" id="SubmitQuestion2" value="2"  />
    <label for="SubmitQuestion2">A dark gloomy orange</label>
    <input type="radio" name="color" id="SubmitQuestion3" value="3"  />
    <label for="SubmitQuestion3">A perfect glittering blue</label>
  </fieldset>
</div>

أيضا اسمحوا لي أن أستخدم يوي أنماط css كقاعدة.إذا كنت لا familir معهم ، ويمكن العثور عليها هنا:

• إعادة تعيين-الخطوط-شبكات.css
• قاعدة-دقيقة.css

الوثائق بالنسبة لهم على حد سواء هنا : ياهو!واجهة المكتبة

@pkaeding:شكراحاولت بعض العائمة كل شيء بدا مجرد عبث.التصميم النشطة زر الراديو بدا أن تكون قابلة للتنفيذ مع بعض input[type=radio]:نشط الترشيح على بحث جوجل, ولكن لم أكن الحصول عليه للعمل بشكل صحيح.لذا فإن السؤال أعتقد هو أكثر من ذلك:هل هذا ممكن على كل من اليوم المتصفحات الحديثة, وإذا لم يكن, ما هو الحد الأدنى من شبيبة المطلوب ؟

Answer 1

الجزء الأول من السؤال يمكن حلها فقط HTML & CSS ؛ سوف تحتاج إلى استخدام جافا سكريبت الجزء الثاني.

الحصول على التسمية بالقرب من زر الراديو

لست متأكدا ماذا تقصد ب "التالي":على نفس الخط و بالقرب من أو على أسطر منفصلة?إذا كنت تريد جميع أزرار الراديو على نفس الخط, مجرد استخدام الهوامش إلى دفع بينهما.إذا كنت تريد كل منهم على خط الخاصة بهم, لديك خياران (إلا إذا كنت ترغب في المغامرة في float: إقليم):

• استخدام <br />s تقسيم الخيارات عدا بعض CSS إلى محاذاة عموديا لهم:

<style type='text/css'>
    .input input
    {
        width: 20px;
    }
</style>
<div class="input radio">
    <fieldset>
        <legend>What color is the sky?</legend>
        <input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />

        <input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1"  />
        <label for="SubmitQuestion1">A strange radient green.</label>
        <br />
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2"  />
        <label for="SubmitQuestion2">A dark gloomy orange</label>
        <br />
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3"  />
        <label for="SubmitQuestion3">A perfect glittering blue</label>
    </fieldset>
</div>

• اتبع قائمة على حدة'المادة: أجمل النماذج التي يسهل الوصول إليها

تطبيق النمط المحدد حاليا التسمية + زر الراديو

والتصميم <label> هو السبب في أنك سوف تحتاج إلى اللجوء إلى جافا سكريبت.مكتبة مثل مسج مثالية ل هذا:

<style type='text/css'>
    .input label.focused
    {
        background-color: #EEEEEE;
        font-style: italic;
    }
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('.input :radio').focus(updateSelectedStyle);
        $('.input :radio').blur(updateSelectedStyle);
        $('.input :radio').change(updateSelectedStyle);
    })

    function updateSelectedStyle() {
        $('.input :radio').removeClass('focused').next().removeClass('focused');
        $('.input :radio:checked').addClass('focused').next().addClass('focused');
    }
</script>

على focus و blur السنانير هناك حاجة إلى جعل هذا العمل في IE.

Answer 2

أي CSS3-تمكين المتصفح يمكنك استخدام المتاخمة الأخوة محدد التصميم التسميات الخاصة بك

input:checked + label {
    color: white;
}  

MDN هو متصفح التوافق الجدول يقول أساسا كل من التيار الشعبي المتصفحات (كروم, إنترنت إكسبلورر, فايرفوكس, سفاري) على كل من سطح المكتب والمحمول ، متوافقة.

Answer 3

هذا سوف تحصل على الأزرار الخاصة بك والعلامات بجانب بعضها البعض على الأقل.أعتقد أن الجزء الثاني لا يمكن القيام به في css وحده ، سوف تحتاج إلى جافا سكريبت.وجدت الصفحة التي قد تساعدك مع هذا الجزء أيضا ، ولكن ليس لدي الوقت الآن لمحاولة بها: http://www.webmasterworld.com/forum83/6942.htm

<style type="text/css">
.input input {
  float: left;
}
.input label {
  margin: 5px;
}
</style>
<div class="input radio">
    <fieldset>
        <legend>What color is the sky?</legend>
        <input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />

        <input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1"  />
        <label for="SubmitQuestion1">A strange radient green.</label>

        <input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2"  />
        <label for="SubmitQuestion2">A dark gloomy orange</label>
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3"  />
        <label for="SubmitQuestion3">A perfect glittering blue</label>
    </fieldset>
</div>