精华内容
下载资源
问答
  • 下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式。...此复选框风格就像一个解锁滑块,滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮(label标签)
  • 通过CSS可以轻松自定义复选框外观 。 即使这样,自定义仅影响box和check样式 。 要使用真正不同的设计自定义复选框,需要进行大量编码。 不过,在Switchery的帮助下,复选框自定义已成为小菜一碟。 它能够自动...

    复选框对于提供用户输入非常有用。 当用户输入真值时,它将在小方框内显示一个复选框。 通过CSS可以轻松自定义复选框的外观 即使这样,自定义仅影响box和check样式 要使用真正不同的设计自定义复选框,需要进行大量编码。

    不过,在Switchery的帮助下,复选框自定义已成为小菜一碟。 它能够自动将您的复选框元素转换为类似iOS7的漂亮开关按钮。 还可定制开关,以完美匹配您的设计。 让我们来看看。

    Switchery入门

    Switchery是一个免费的独立javascript库。 要安装它,您只需要将Switchery javascript和样式文件包含到您的网络中即可。 您可以从GitHub获取这两个文件。

    <link rel="stylesheet" type="text/css" href="css/switchery.css" />
    <script type="text/javascript" src="js/switchery.js"></script>

    要转换您的老式复选框,只需将您的checkbox元素包含在将被称为Switchery的类中即可。

    提供复选框的初始状态也非常容易。 您可以通过在首次加载时将checked属性包含在HTML中以获取选中状态来做到这一点。 例如,我们将demo类添加到具有选中状态的复选框,如下所示:

    <input type="checkbox" class="demo" checked />

    目前,该复选框尚未更改。 我们仍然需要将以下JavaScript代码添加到HTML中。 这是我们放置定义的复选框类的地方,并提供一些选项(如果需要)。

    <script>
    var elem = document.querySelector('.demo'); // referred checkbox class is here
    var init = new Switchery(elem); // put option after elem attribute
    </script>

    而已!

    自定义开关

    要提供一些选项,可以在javascript中完成。 此选项可以更改默认开关的外观。 以下是所有可用选项:

    • color :更改开关元件的颜色,使用HEX或RGB值
    • secondaryColor :更改开关阴影和边框的“关闭”状态颜色
    • className :自定义switchery.css中样式的开关元素类名称
    • disabled :启用或禁用点击事件的开关,以布尔值(真或假)填充
    • disabledOpacity :当disabled为true时,更改开关的不透明度,范围从0到1
    • speed :更改过渡时间长度,例如“ 0.1s”,“ 0.5s”,“ 2.2s”

    例如,使用我们之前的开关,让我们更改其第一和第二颜色。 init变量的elem属性之后,只需将选项放在一对大括号中即可,如下所示:

    <script>
    var elem = document.querySelector('.demo');
    var init = new Switchery(elem,{ 
        color: '#fec200', 
    	secondaryColor: '#41b7f1' 
    });
    </script>

    结果如下:

    除了仅定制状态设计外,还有许多可用的选项,例如显示多个开关或将开关与其他元素链接并获取其当前状态。 与往常一样, 文档页面是一个有用的地方。

    结论

    使用诸如Switchery之类的工具,从任何设备适应任何类型的设计变得越来越容易。 甚至,它已经过测试,并在许多现代浏览器(如Chrome,Firefox,Opera,Safari和IE8 +)中受支持。 如果要改用另一种iOS 7风格的UI小部件设计,则可能要签出Powerange进行范围滑块控制。


    翻译自: https://www.hongkiat.com/blog/html-checkbox-ios7-switchery-js/

    展开全文
  • 2.2 复选框和单选按钮的使用实例

    千次阅读 2017-06-22 22:26:29
    复选框和单选按钮都用于在界面上显示一些选项供用户选择,界面上的复选框可以随意选择或取消选择,而处于同一组的单选按钮,同时只能有一个处于选中状态,当一个单选按钮变成选择状态时,其同组中之前选中的控件将...

    复选框和单选按钮都用于在界面上显示一些选项供用户选择,界面上的复选框可以随意选择或取消选择,而处于同一组的单选按钮,同时只能有一个处于选中状态,当一个单选按钮变成选择状态时,其同组中之前选中的控件将自动清除选择状态;

    2.2.1 技术要点:

    • 和按钮控件一样,复选框和单选按钮在单击时都会发出 BN_ CLICKED 消息;
    • 实际上,复选框和单选框按钮本身就是按钮控件,只是比普通按钮控件多了“BS_ CHECKBOX ”、“BS_ RADIOBUTTON ”等风格,使得其功能和外观不同于普通按钮;
    • 在 MFC 中,对这两种控件的封装都是 CButton 类;

    2.2.2 实例步骤:

    本实例通过一个三基色测试程序,演示复选框控件和单选控件的使用方法。实例步骤如下:

    1. 新建一个基于对话框的 MFC 应用程序,项目名称为“CheckBoxDemo”;这里写图片描述
    2. 在主对话框上添加3个复选框控件,将其ID分别修改为“IDC_ CHK_ RED”、“IDC_ CHK_ GREEN”和“IDC_ CHK_ BLUE”。文本属性分别修改为“红”、“绿”和“蓝”;这里写图片描述
    3. 在主对话框上添加两个单选按钮控件,将其 ID 分别修改为“ IDC_ RD_ RECT”和“ IDC_ RD_ ROUND”,文本属性分别修改为“矩形”和“圆形”。添加控件后,选中“IDC_ RD_ RECT”的“Group”属性。注意在添加控件时要连续按照顺序添加,以保证其 ID 的连续性;这里写图片描述
    4. 在对话框中单击鼠标右键,并单击弹出菜单中的“ClassWizard”项,打开类向导。在类向导中选择“Member Variables”选项卡,在“Control IDs”列表框中选中“IDC_ CHK_ BLUE”。单击“Add Variable”按钮,将弹出添加变量对话框,在“Member variable name”文本框中输入变量名称“m_ chk_ blue”,并将“Category”下拉框的选项修改为“Control”,单击“OK”按钮为控件添加控件型变量;这里写图片描述这里写图片描述
    5. 重复上诉步骤,为对话框上的所有复选框的单选框按钮添加控件型变量,添加变量后的类向导界面如图;这里写图片描述
    6. 再通过类向导为主对话框添加“WM_ ERASEBKGND”消息的响应函数。注意要先将类向导中“Class Info”标签页中的“Message filter”修改为“Window”,才能在“Message Maps”标签页中看到该消息;这里写图片描述这里写图片描述

    函数代码如下所示:

    //WM_ERASEBKGND消息的响应函数
    BOOL CCheckBoxDemoDlg::OnEraseBkgnd(CDC* pDC) 
    {
        //先绘制默认背景
        BOOL bRet = CDialog::OnEraseBkgnd(pDC);
        //获取复选框控件所选的颜色
        int nRed, nGreen, nBlue;
        nRed = m_chk_red.GetCheck() ? 255 : 0;
        nGreen = m_chk_green.GetCheck() ? 255 : 0;
        nBlue = m_chk_blue.GetCheck() ? 255 : 0;
        //根据选择组成颜色
        COLORREF crFore = RGB(nRed, nGreen, nBlue);
        //创建指定颜色的画刷
        CBrush brush;
        brush.CreateSolidBrush(crFore);
        //将画刷选入DC
        CBrush *pOldBrush = pDC->SelectObject(&brush);
        //根据选择,绘制矩形或圆形
        RECT rc = {50, 20, 150, 120};
        if(m_rd_rect.GetCheck())
            pDC->Rectangle(&rc);
        else
            pDC->Ellipse(&rc);
        //恢复DC原状
        pDC->SelectObject(pOldBrush);
        return bRet;
    }

    通过类向导,为主对话框上的所有复选框和单选按钮添加单击事件的响应函数,函数代码如下:

    //界面上的单选按钮和复选框的单击事件响应函数
    void CCheckBoxDemoDlg::OnChkBlue() 
    {
        //选项改变时,让对话框重绘
        Invalidate();
    }
    //其余控件均采用相同的处理代码
    void CCheckBoxDemoDlg::OnChkGreen() 
    {
        OnChkBlue();
    }
    void CCheckBoxDemoDlg::OnChkRed() 
    {
        OnChkBlue();
    }
    void CCheckBoxDemoDlg::OnRdRect() 
    {
        OnChkBlue();
    }
    void CCheckBoxDemoDlg::OnRdRound() 
    {
        OnChkBlue();
    }

    在主对话框的 OnInitDialog 事件中添加如下所示的初始化代码:

    BOOL CCheckBoxDemoDlg::OnInitDialog()
    {
        CDialog::OnInitDialog();
    
        // Set the icon for this dialog.  The framework does this automatically
        //  when the application's main window is not a dialog
        SetIcon(m_hIcon, TRUE);         // Set big icon
        SetIcon(m_hIcon, FALSE);        // Set small icon
    
        // TODO: Add extra initialization here
        //默认选择“圆形”单选按钮
        CheckRadioButton(IDC_RD_RECT, IDC_RD_ROUND, IDC_RD_ROUND);  
    
        return TRUE;  // return TRUE  unless you set the focus to a control
    }

    2.2.3 程序运行:

    按 F5 键运行程序,修改界面上的选项,程序就会自动在界面上绘制出指定颜色的图形:这里写图片描述

    2.2.4 源程序解读:

    • 通过本节实例,读者可以掌握给对话框上的控件添加变量的方法。变量有两种类型,一种是控件变量,通过该变量可以访问和控制控件的所有属性。另一种是数值型变量,通过该变量可以方便地访问控件的值,但无法访问更多属性;
    • 一组单选按钮控件在对话框上必须具有连续的ID,并且这组控件中的第一个选中了“Group”属性,这样这组控件就具有了互斥特性,以保证同时只有一个能被选中;
    展开全文
  • css 按钮隐藏复选框View demo 查看演示Download Source 下载源Hello everyone! For a while now, I’m having fun with the new CSS properties (CSS3). It’s an incredible playground for ...
    css 按钮隐藏复选框

    css 按钮隐藏复选框

    Button Switches with Checkboxes and CSS3 Fanciness

    Hello everyone! For a while now, I’m having fun with the new CSS properties (CSS3). It’s an incredible playground for creativity and cleverness. I particularly enjoy designing and creating UI elements like buttons, switches, toggles and such. That’s the focus of this tutorial, I’ll show you how to create button switches with CSS only, without a line of JavaScript. Ready for it? A few things before starting:

    大家好! 现在有一段时间,我在玩新CSS属性(CSS3)。 这是创造力和智慧不可思议的游乐场。 我特别喜欢设计和创建UI元素,例如按钮,开关,切换键等。 这就是本教程的重点,我将向您展示如何仅使用CSS而不使用JavaScript来创建按钮开关。 准备好了吗? 开始之前的几件事:

    • You won’t see any vendor prefixes in the CSS snippets, but you will of course find them in the files.

      您不会在CSS片段中看到任何供应商前缀,但是您当然会在文件中找到它们。
    • We won’t use much transitions between states because we often use pseudo-elements to reduce the number of elements to its minimum, and as of writing, only Firefox supports transitions/animations on pseudo-elements.

      我们不会在状态之间使用过多的过渡,因为我们经常使用伪元素将元素的数量减少到最少,并且在撰写本文时,只有Firefox支持伪元素的过渡/动画。
    • We’ll use the “checkbox hack” (see below).

      我们将使用“复选框黑客”(如下所示)。
    • I personally use the box-model where [width] = [element-width] + [padding] + [borders]. I activate it with the following snippet:

      我个人使用[[width] = [element-width] + [padding] + [borders]的盒子模型。 我使用以下代码段激活它:
    
        *,
        *:after,
        *:before {
            box-sizing: border-box;
        }
    
    

    关于“复选框黑客”(About the “Checkbox Hack”)

    The checkbox hack allows us to have a toggle handler in pure CSS. It relies on a checkbox (which is either checked or unchecked), the :checked pseudo-selector, and a sibling selector (~ or +). Basically, you can say “if the checkbox is checked, then the following X element is behaving like this”. The old way consisted of having a checkbox with an ID, and a label tag with a “for” attribute calling the checkbox ID. This technique allowed to hide the checkbox and still toggle it by clicking on the label. The only problem with this approach it that mobile Safari doesn’t support it. So we have a workaround for that: turn the checkbox invisible with the opacity property, set it on top of whatever element you want (I still use label) and there you go, when clicking the element, you are actually clicking the checkbox! The code looks like this:

    复选框hack允许我们在纯CSS中有一个切换处理程序。 它依赖于一个复选框(已选中或未选中)、: checked伪选择器和同级选择器(〜或+)。 基本上,您可以说“如果选中此复选框,则以下X元素的行为如下所示”。 以前的方法包括:拥有一个带有ID的复选框和一个带有“ for”属性的标签标签,以调用该复选框的ID。 这种技术允许隐藏复选框,并仍然可以通过单击标签来切换它。 这种方法的唯一问题是移动Safari不支持它。 因此,我们有一个解决方法:使用opacity属性使复选框不可见,将其设置在所需的任何元素之上(我仍在使用标签),然后单击该元素,实际上就是在单击该复选框! 代码如下:

    
    .switch input {
        /* First, we make it as wide as the container */
        position: absolute;
        width: 100%;
        height: 100%;
        /* Then, we put it on top of everything else */
        z-index: 100;
        /* Last, we make it invisible */
        opacity: 0;
        /* This one is just for ergonomy */
        cursor: pointer;
    }
    
    

    Those 12 lines of CSS will be used in all the following demos, so feel free to copy paste it; it never changes. Note: for another awesome demo including the checkbox hack, you may want to have a look at this tutorial: Annotation overlay effect with CSS3.

    这12行CSS将在以下所有演示中使用,因此随时可以复制粘贴。 它永远不会改变。 注意:对于另一个很棒的演示,包括复选框hack,您可能需要看一下本教程: CSS3的Annotation overlay effect

    例子1 (Example 1)

    Let’s start with a lovely little push button, with a small illuminated LED when it’s on.

    让我们从一个可爱的小按钮开始,当它打开时,它带有一个小的发光LED。

    标记 (The Markup)

    
    <div class="switch">
    	<input type="checkbox">
    	<label></label>
    </div> 
    
    

    The .switch element is our container. Within this very element the checkbox and the label will be positioned on top of each other to allow us to do the magic trick. The input doesn’t need anything more than the checkbox type (no ID, no name, nothing).

    .switch元素是我们的容器。 在此元素内,复选框和标签将位于彼此的顶部,以使我们能够完成魔术。 输入仅需要复选框类型(没有ID,没有名称,什么也没有)。

    And the last element could be anything (an anchor, a div, a span, a label, a bold/italic tag, whatever). I personally chose a label because I used to use the old checkbox hack, which required a label.

    最后一个元素可以是任何内容(锚点,div,范围,标签,粗体/斜体标签等)。 我之所以选择一个标签,是因为我曾经使用过需要标签的旧复选框。

    CSS (The CSS)

    First, we give our button a size by setting the width and height to the container. Be sure the width and the height are the same, or your button won’t be round. Remember to hide the checkbox with the according CSS code at the top of this article.

    首先,我们通过设置容器的宽度和高度来为按钮设置尺寸。 确保宽度和高度相同,否则按钮将不会变圆。 请记住,隐藏带有本文顶部相应CSS代码的复选框。

    
    .switch {
        width: 100px;
        height: 100px;
        position: relative;
    }
    
    

    Then, the label, which is where we’ll add all the styling to. First of all, we set it to block and make it 100% of its parent size (the container). Then, we give it a relative position in order to add some pseudo-elements later.

    然后,在标签上添加所有样式。 首先,我们将其设置为阻止并使其达到其父大小(容器)的100%。 然后,我们给它一个相对位置,以便以后添加一些伪元素。

    Time for some real styles: a background color, a round shape, and some awesome box-shadows to make it look like it’s embossed.

    是时候使用一些真实的风格:背景色,圆形和一些令人敬畏的盒子阴影,使其看起来像浮雕一样。

    
    .switch label {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        border-radius: 50%;
        background: #eaeaea;
        box-shadow: 
            0 3px 5px rgba(0,0,0,0.25),
            inset 0 1px 0 rgba(255,255,255,0.3),
            inset 0 -5px 5px rgba(100,100,100,0.1),
            inset 0 5px 5px rgba(255,255,255,0.3);
    }
    
    

    It already looks acceptable, but we need to add some pseudo-elements to make it awesome, right? So let’s go. The first one is meant to improve the embossed look by adding a little recess around the button. So we set it to position absolute, behind the button and we don’t give it any size but we give it some top/right/bottom/left values instead.

    它看起来已经可以接受了,但是我们需要添加一些伪元素使其变得很棒,对吗? 所以走吧第一个旨在通过在按钮周围添加一个小凹槽来改善浮雕外观。 因此,我们将其设置为绝对位置,并位于按钮后面,并且不给它任何大小,而是给它一些顶部/右侧/底部/左侧值。

    And of course, some aesthetics: a soft gradient from top to bottom and some sexy box-shadows.

    当然还有一些美感:从上到下的柔和渐变以及一些性感的盒子阴影。

    
    .switch label:after {
        content: "";
        position: absolute;
        z-index: -1;
        top: -8%; 
        right: -8%; 
        bottom: -8%; 
        left: -8%;
        border-radius: inherit;
        background: #ddd; /* Fallback */
        background: linear-gradient(#ccc, #fff);
        box-shadow: 
            inset 0 2px 1px rgba(0,0,0,0.15),
            0 2px 5px rgba(200,200,200,0.1);
    }
    
    

    And now, the LED, which is the main indicator for the state of the button. Basically, it’s a small circle placed in the middle of the button. A little more fanciness than *just* box-shadows will be used here: a radial gradient. Let’s use a simple one though, just to make the whole thing a little nicer for browsers supporting radial gradients, and make a fallback for others.

    现在,LED是按钮状态的主要指示器。 基本上,它是按钮中间的一个小圆圈。 这里将使用比*仅*框阴影稍大的奇特效果:径向渐变。 不过,让我们使用一个简单的示例,只是为了使整体功能对支持径向渐变的浏览器更好一些,并为其他浏览器提供一个替代。

    
    .switch label:before {
        content: "";
        position: absolute;
        width: 20%;
        height: 20%; 
        left: 40%;
        top: 40%;
        border-radius: inherit;
        background: #969696; /* Fallback */
        background: radial-gradient(40% 35%, #ccc, #969696 60%);
        box-shadow:
            inset 0 2px 4px 1px rgba(0,0,0,0.3),
            0 1px 0 rgba(255,255,255,1),
            inset 0 1px 0 white;
    }
    
    

    Okay, so now, we have a nice button. Let’s deal with the checked state. When you click on the container, you actually click on the invisible checkbox which sits on top of the label. From here, you have activated the checkbox, meaning you can use the :checked state and a sibling selector. The following is like saying “Hey, the input element is checked, so the following label in the .switch element has to be like this. So when the button is turned on, we change the background color of the LED (:before pseudo-element), as well as the background of the button. That’s basically it!

    好的,现在,我们有了一个不错的按钮。 让我们处理检查状态。 当您单击容器时,实际上是单击标签顶部的不可见复选框。 从这里,您已经激活了复选框,这意味着您可以使用:checked状态和同级选择器。 以下内容就像说“嘿,检查输入元素,因此.switch元素中的以下标签必须像这样。 因此,当按钮打开时,我们将更改LED的背景颜色(在伪元素之前:)以及按钮的背景。 基本上就是这样!

    
    .switch input:checked ~ label { /* Button */
    	background: #e5e5e5; /* Fallback */
        background: linear-gradient(#dedede, #fdfdfd);
    }
    
    .switch input:checked ~ label:before { /* LED */
        background: #25d025; /* Fallback */
        background: radial-gradient(40% 35%, #5aef5a, #25d025 60%);
        box-shadow:
            inset 0 3px 5px 1px rgba(0,0,0,0.1),
            0 1px 0 rgba(255,255,255,0.4),
            0 0 10px 2px rgba(0, 210, 0, 0.5);
    }
    
    

    例子2(Example 2)

    In this example we want to come close to an actual light button switch, so let’s see how far we can take it.

    在此示例中,我们希望接近实际的灯光按钮开关,因此让我们看一下它能走多远。

    标记 (The Markup)

    The markup is the same as in the first example; a container, a checkbox and a label:

    标记与第一个示例中的相同; 一个容器,一个复选框和一个标签:

    
    <div class="switch">
    	<input type="checkbox">
    	<label></label>
    </div> 
    
    

    CSS(The CSS)

    We start by setting a size to our button and hiding the checkbox.

    首先,为按钮设置大小并隐藏复选框。

    
    .switch {
        width: 50px;
        height: 100px;
        position: relative;
    }
    
    

    This example requires many more box-shadows to look well. Let’s not forget to add a soft background color and rounded corners, to make the whole thing look even softer:

    此示例需要更多的矩形阴影才能看起来不错。 我们不要忘记添加柔和的背景颜色和圆角,以使整个外观看起来更加柔和:

    
    .switch label {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        background: #cbc7bc;
        border-radius: 5px;
        box-shadow:
            inset 0 1px 0 white,
            0 0 0 1px #999,
            0 0 5px 1px rgba(0,0,0,0.2),
            0 2px 0 rgba(255,255,255,0.6),
            inset 0 10px 1px #e5e5e5,
            inset 0 11px 0 rgba(255,255,255,0.5),
            inset 0 -45px 3px #ddd;
    }
    
    

    And now, let’s add some pseudo-elements. The first one is meant to create the housing, the second one to simulate screws. Let’s start with the housing. It’s pretty much the same thing as in our previous example, plus a little border:

    现在,让我们添加一些伪元素。 第一个用于创建外壳,第二个用于模拟螺钉。 让我们从外壳开始。 它与我们之前的示例几乎一样,只是带有一点边框:

    
    .switch label:after {
        content: "";
        position: absolute;
        z-index: -1;
        top: -20px;
        left: -25px;
        bottom: -20px;
        right: -25px;
        background: #ccc; /* Fallback */
        background: linear-gradient(#ddd, #bbb);
        border-radius: inherit;
        border: 1px solid #bbb;
        box-shadow:
            0 0 5px 1px rgba(0,0,0,0.15),
            0 3px 3px rgba(0,0,0,0.3),
            inset 0 1px 0 rgba(255,255,255,0.5);
    }
    
    

    The second one is more interesting, since we only have one element to create two screws. This is one more job for box-shadows! Because we are using a plain color, we can easily make a shadow look like our main element. We could even make 4, 10 or 42 screw holes with this. But we just need two here:

    第二个更有趣,因为我们只有一个元素可以创建两个螺钉。 对于盒子阴影来说,这是另一项工作! 因为我们使用的是纯色,所以我们可以轻松地使阴影看起来像我们的主要元素。 我们甚至可以用它制作4、10或42个螺Kong。 但是我们这里只需要两个:

    
    .switch label:before {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        top: -13px;
        left: 20px;
        background: #666;
        border-radius: 50%;
        box-shadow:
            0 1px 0 white, /* Subtle reflection on the bottom of the hole */
            0 120px 0 #666, /* Faking a second screw hole... */
            0 121px 0 white; /* And its reflection */
    }
    
    

    Now the part of the checked state. In this example only the central part (which is the label) will change when we click it. And we created this material effect only with box-shadows, so easy peasy, let’s just revert them, adapt them, prettify them, and we’re done:

    现在是检查状态的一部分。 在此示例中,单击时仅中心部分(即标签)会更改。 而且,我们仅用盒形阴影创建了这种物质效果,如此简单易用,让我们将它们还原,改编,美化它们,然后完成:

    
    .switch input:checked ~ label { /* Button */
        background: #d2cbc3;
        box-shadow:
            inset 0 1px 0 white,
            0 0 0 1px #999,
            0 0 5px 1px rgba(0,0,0,0.2),
            inset 0 -10px 0 #aaa,
            0 2px 0 rgba(255,255,255,0.1),
            inset 0 45px 3px #e0e0E0,
            0 8px 6px rgba(0,0,0,0.18);
    }
    
    

    例子3(Example 3)

    Let’s get on with something even cooler. This one is adapted from a lovely design by talented Piotr Kwiatkowski. It looks so smooth, doesn’t it?

    让我们继续做一些更酷的事情。 这是根据才华横溢的Piotr Kwiatkowski的可爱设计改编而成。 看起来很光滑,不是吗?

    标记 (The Markup)

    For this switch, we will need an extra element. Let’s pick something quiet and discrete, like an <i>.

    对于此开关,我们将需要一个额外的元素。 让我们选择一个安静且离散的东西,例如<i>。

    
    <div class="switch">
    	<input type="checkbox">
    	<label><i></i></label>
    </div> 
    
    

    CSS(The CSS)

    So once again, we hide the checkbox, with the same little snippet of CSS. And, as always, we give a size to the container.

    因此,我们再次隐藏具有相同CSS小片段的复选框。 而且,和往常一样,我们给容器一个尺寸。

    
    .switch {
        width: 180px;
        height: 50px;
        position: relative;
    }
    
    

    So here we are going to do the following: the label will be the container of the toggle switch. The <i> tag will be the actual toggle element. So the label is only the dark grey background with shadows, nothing more. Pseudo-elements will do the rest.

    因此,在这里我们将执行以下操作:标签将是拨动开关的容器。 <i>标签将是实际的切换元素。 因此,标签只是带有阴影的深灰色背景,仅此而已。 伪元素将完成其余的工作。

    
    .switch label {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        background: #a5a39d;
        border-radius: 40px;
        box-shadow:
            inset 0 3px 8px 1px rgba(0,0,0,0.2),
            0 1px 0 rgba(255,255,255,0.5);
    }
    
    

    This is the “frame of the container”, so we give it a nice gradient, and some sweet box-shadows.

    这是“容器的框架”,因此我们给它提供了一个不错的渐变以及一些甜美的盒子阴影。

    
    .switch label:after {
        content: "";
        position: absolute;
        z-index: -1;
        top: -8px; right: -8px; bottom: -8px; left: -8px;
        border-radius: inherit;
        background: #ccc; /* Fallback */
        background: linear-gradient(#f2f2f2, #ababab);
        box-shadow: 0 0 10px rgba(0,0,0,0.3),
            0 1px 1px rgba(0,0,0,0.25);
    }
    
    

    This pseudo-element is meant to create a soft hollow around the button, so as usual, we’ll use gradient and shadows. A little enhancement for Chrome with the use of a blur filter to make the effect even softer.

    该伪元素旨在在按钮周围创建一个柔软的空心,因此,像往常一样,我们将使用渐变和阴影。 使用模糊滤镜使Chrome略有增强,使效果更加柔和。

    
    .switch label:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -18px; right: -18px; bottom: -18px; left: -18px;
        border-radius: inherit;
        background: #eee; /* Fallback */
        background: linear-gradient(#e5e7e6, #eee);
        box-shadow: 0 1px 0 rgba(255,255,255,0.5);
        -webkit-filter: blur(1px); /* Smooth trick */
        filter: blur(1px); /* Future-proof */
    }
    
    

    So now, we have a really beautiful frame for our toggle switch. Let’s take care of the switch, shall we?

    所以现在,我们的拨动开关有了一个非常漂亮的框架。 让我们照顾一下开关,好吗?

    We turn it into a block element, give it the height of its parent and a little bit more than half of its width. We place it on the left of the container, and give it some nice styles (shadows and gradients, you get it):

    我们将其变成一个块元素,为其指定其父对象的高度,并为其宽度的一半多一点。 我们将其放置在容器的左侧,并为其提供一些漂亮的样式(阴影和渐变,就可以了):

    
    .switch label i {
        display: block;
        height: 100%;
        width: 60%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        border-radius: inherit;
        background: #b2ac9e; /* Fallback */
        background: linear-gradient(#f7f2f6, #b2ac9e);
        box-shadow:
            inset 0 1px 0 white,
            0 0 8px rgba(0,0,0,0.3),
            0 5px 5px rgba(0,0,0,0.2);
    }
    
    

    This first pseudo-element is used to enhance the aesthetics: it adds a curved effect to the toggle. We place it in the middle, and gave it a gradient from top to bottom, almost the same as the one of its parent but reverted.

    第一个伪元素用于增强美观性:它为肘节添加了弯曲效果。 我们将其放置在中间,并给它一个从上到下的渐变,与它的父级几乎相同,但恢复原状。

    
    .switch label i:after {
        content: "";
        position: absolute;
        left: 15%;
        top: 25%;
        width: 70%;
        height: 50%;
        background: #d2cbc3; /* Fallback */
        background: linear-gradient(#cbc7bc, #d2cbc3);
        border-radius: inherit;
    }
    
    

    The second pseudo-element is the word “ON” or “OFF”, depending on the state of the button. We use the content property to set the right word, and some font styles to make it look like it’s engraved in the background:

    第二个伪元素是单词“ ON”或“ OFF”,具体取决于按钮的状态。 我们使用content属性设置正确的单词,并使用一些字体样式使其看起来像刻在背景中:

    
    .switch label i:before {
        content: "off";
        position: absolute;
        top: 50%;
        right: -50%;
        margin-top: -12px;
        color: #666; /* Fallback */
        color: rgba(0,0,0,0.4);
        font-style: normal;
        font-weight: bold;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 24px;
        text-transform: uppercase;
        text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
    }
    
    

    So now we have a toggle switch which looks like the one from Piotr, right? Let’s get into the checked state. Three things are changing when we click on the checkbox: the background color, the toggle’s position, and the word (“ON” or “OFF”):

    所以现在我们有了一个拨动开关,看起来像是Piotr的那样,对吗? 让我们进入检查状态。 单击复选框时,三件事正在发生变化:背景颜色,切换开关的位置和单词(“ ON”或“ OFF”):

    
    .switch input:checked ~ label { /* Background */
        background: #9abb82;
    }
    
    .switch input:checked ~ label i { /* Toggle */
        left: auto;
        right: -1%;
    }
    
    .switch input:checked ~ label i:before { /* On/off */
        content: "on";
        right: 115%;
        color: #82a06a;
        text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659;
    }
    
    

    例子4(Example 4)

    Our last example is based on another work from Piotr Kwiatkowski, but slightly edited by myself in order to have the same color theme as the others.

    我们的最后一个示例基于Piotr Kwiatkowski的另一作品,但我自己对其进行了少许编辑,以使其与其他主题具有相同的颜色主题。

    Let’s do something really amazing on this one, with an icon font and transitions!

    让我们通过图标字体和过渡功能在这一方面做些非常了不起的事情!

    标记 (The Markup)

    The markup will be pretty much the same as in the third example. The class on the <i> tag is required in order to make FontAwesome work.

    标记将与第三个示例中的几乎相同。 <i>标记上的类是使FontAwesome起作用所必需的。

    
    <div class="switch">
        <input type="checkbox">
        <label><i class="icon-off"></i></label>
    </div> 
    
    

    CSS(The CSS)

    I won’t cover here all the FontAwesome stuff because I’m pretty sure it has already been covered in another article, plus probably all of you have already done that before. Just make sure that

    我不会在这里介绍所有FontAwesome东西,因为我很确定它已经在另一篇文章中介绍了,而且也许你们所有人以前都已经做过。 只要确保

    • your @font-face stuff indicate the correct paths to the files,

      您的@ font-face内容指示文件的正确路径,
    • one of your CSS files includes FontAwesome related styles.

      您CSS文件之一包含FontAwesome相关样式。

    So let’s start with the basics: checkbox hiding and container sizing:

    因此,让我们从基础开始:复选框隐藏和容器大小调整:

    
    .switch {
        width: 150px;
        height: 150px;
        position: relative;
    }
    
    

    Now, let’s take care of the label which is basically our big old button. Note that we include a few font style here. Since all of them are inherited, they will go straight to the <i> element (icon). So nothing new, a sweet gradient and some box-shadows for a beautiful effect:

    现在,让我们来照顾标签,它基本上是我们的旧按钮​​。 请注意,此处包含一些字体样式。 由于它们都是继承的,因此它们将直接进入<i>元素(图标)。 因此,没有什么新鲜的东西了,甜美的渐变色和一些盒子阴影带来了美丽的效果:

    
    .switch label {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        color: #a5a39d;
        font-size: 70px;
        text-align: center;
        line-height: 115px;
        text-shadow: 0 2px 1px rgba(0,0,0,0.25);
        border-radius: 50%;
        background: #b25244; /* Fallback */
        background: linear-gradient(#f7f2f6, #b2ac9e);
        transition: all 0.3s ease-out;
        z-index: -1;
        box-shadow:
            inset 0 2px 3px rgba(255,255,255,0.13),
            0 5px 8px rgba(0,0,0,0.3),
            0 10px 10px 4px rgba(0,0,0,0.3);
    }
    
    

    Now, both label pseudo-elements are used to make the material effect around the button. We apply the blur filter to the closest one to make it a bit more subtle.

    现在,两个标签伪元素都用于在按钮周围产生实物效果。 我们将模糊滤镜应用于最接近的滤镜,以使其更加微妙。

    
    .switch label:before {
        content: ""; 
        position: absolute;
        left: -10px;
        right: -10px;
        top: -10px;
        bottom: -10px;
        z-index: -1;
        border-radius: inherit;
        box-shadow: inset 0 10px 10px rgba(0,0,0,0.13); 
        -webkit-filter:blur(1px); /* Smooth trick */
        filter: blur(1px); /* Future-proof */
    }
    
    .switch label:after {
        content: ""; 
        position: absolute;
        left: -20px;
        right: -20px;
        top: -20px;
        bottom: -20px;
        z-index: -2;
        border-radius: inherit;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.1),
            0 1px 2px rgba(0,0,0,0.3),
            0 0 10px rgba(0,0,0,0.15);
    }
    
    

    Okay, let’s deal with our extra element: <i>. FontAwesome uses the :before pseudo-element to show the icon, so we can’t use it. But, we can use the :after one, and we will because we need something to make the upper part of our button. As usual, we give it a nice gradient, some subtle shadows, and a 1px blur to make it smoother.

    好的,让我们处理一下额外的元素:<i>。 FontAwesome使用:before伪元素显示图标,因此我们不能使用它。 但是,我们可以使用:after,然后我们将因为需要一些东西来制作按钮的上部。 和往常一样,我们给它一个不错的渐变,一些细微的阴影以及1px的模糊以使其更平滑。

    
    .switch .icon-off:after {
        content: "";
        display: block;
        position: absolute;
        width: 70%;
        height: 70%;
        left: 50%;
        top: 50%;
        z-index: -1;
        margin: -35% 0 0 -35%;
        border-radius: 50%;
        background: #d2cbc3; /* Fallback */
        background: linear-gradient(#cbc7bc, #d2cbc3);
        box-shadow:
            0 -2px 5px rgba(255,255,255,0.05),
            0 2px 5px rgba(255,255,255,0.1);
        -webkit-filter:blur(1px); /* Smooth trick */
        filter: blur(1px); /* Future-proof */
    }
    
    

    And now, the checked state; pretty simple: the icon turns green, and the button looks pressed:

    现在,检查状态; 非常简单:图标变为绿色,并且按钮看上去已按下:

    
    .switch input:checked ~ label { /* Button */
        color: #9abb82;
        box-shadow:
            inset 0 2px 3px rgba(255,255,255,0.13),
            0 5px 8px rgba(0,0,0,0.35),
            0 3px 10px 4px rgba(0,0,0,0.2);
    } 
    
    

    最后的话(Final words)

    So finally, what do we need to make beautiful buttons with pure CSS? Mostly shadows! But subtle gradients and rounded corners help a lot, too. To turn a simple button into a button switch, we just need one more thing: a checkbox.

    那么,最后,我们需要用纯CSS制作漂亮的按钮吗? 主要是阴影! 但是细微的渐变和圆角也有很大帮助。 要将简单的按钮变成按钮开关,我们只需要再做一件事:一个复选框。

    Please, keep in mind that this kind of stuff is pretty tricky, so not every browser will display it correctly. But, you can make the whole thing fall back to a simple checkbox very easily by using a filtering selector, for example:

    请记住,这种东西非常棘手,因此并不是每个浏览器都能正确显示它。 但是,通过使用过滤选择器,您可以使整个事情很容易地回到一个简单的复选框,例如:

    
       .switch:not(:checked) label {
            /* Styles for label go here... */
        }
    
        .switch:not(:checked) input {
            /* Styles for input go here... */
        }
    
    

    In this case, :not(:checked) is a filter so that browsers that don’t support :checked don’t follow these rules. Check out this article by Lea Verou to find out more about this technique: Accessible star rating widget with pure CSS

    在这种情况下,:not(:checked)是一个过滤器,因此不支持:checked的浏览器不会遵循这些规则。 查看Lea Verou的这篇文章,以了解有关此技术的更多信息:具有纯CSS的可访问星级评分小部件

    Anyway, with a little more time, we can make beautiful things like these:

    无论如何,只要多一点时间,我们就可以制作出如下漂亮的东西:

    Thank you for reading this tutorial, and if you have any question or related work to show, please do. 🙂

    感谢您阅读本教程,如果您有任何疑问或需要展示的相关工作,请这样做。 🙂

    翻译自: https://tympanus.net/codrops/2012/09/13/button-switches-with-checkboxes-and-css3-fanciness/

    css 按钮隐藏复选框

    展开全文
  • eazy ui 复选框单选 重点 (Top highlight)Pick me! Pick me! No, pick me! In today’s cheat sheet we will be looking at selectors and how they differ. Unlike most of my other cheat sheets, this will focus...

    eazy ui 复选框单选

    重点 (Top highlight)

    Pick me! Pick me! No, pick me! In today’s cheat sheet we will be looking at selectors and how they differ. Unlike most of my other cheat sheets, this will focus on two components (radio buttons and checkboxes) side by side for easier comparison — while also comparing them to a few others.

    选我! 选我! 不,接我! 在今天的备忘单中,我们将研究选择器及其区别。 与我的大多数其他备忘单不同,本手册将并排关注两个组件(单选按钮和复选框),以便于进行比较,同时还将它们与其他几个组件进行比较。

    In this cheat sheet we will cover the following:

    在本备忘单中,我们将介绍以下内容:

    1. What selectors are

      什么是选择器
    2. Anatomy of checkboxes and radio buttons

      复选框和单选按钮的剖析
    3. What is the difference between radio buttons and checkboxes

      单选按钮和复选框之间有什么区别
    4. Common styles of selectors

      选择器的常见样式
    5. States

      状态
    6. Rules for label text

      标签文字规则
    7. When you should use them

      什么时候应该使用它们
    8. Accessibility checklist

      辅助功能清单
    9. Closing thoughts

      总结思想

    1.什么是选择器 (1. What selectors are)

    A selector is an input field where the user has to select one (or more) options, unlike a text field where the user has free rein. Selectors, like Lady Gaga’s hairstyles, come in all different shapes and forms. Dropdowns, checkboxes, toggles, sliders, and more are all different types of selectors, yet they look nothing like each other. The main functional difference between these types of selectors is how many options the user can pick: one or more.

    选择器是一个输入字段,用户必须在其中选择一个(或多个)选项,这与文本字段中用户可以自由使用的输入区不同。 选择器(例如Lady Gaga的发型)具有各种不同的形状和形式。 下拉菜单,复选框,切换按钮,滑块等都是不同类型的选择器,但它们看起来并不相似。 这些类型的选择器之间的主要功能区别是用户可以选择多少个选项:一个或多个。

    In a perfect world, where there was no more starvation, animal poaching, greenhouse gases, or crime, I would start a petition to change radio buttons to ‘single selectors’ and checkboxes to ‘multi-selectors’. I think they describe what they are much better, but, alas, these legacy names are too ingrained and we are probably stuck with them.

    在一个完美的世界中,不再有饥饿,偷猎,温室气体或犯罪的发生,我将开始请愿,将单选按钮更改为“单个选择器”,将复选框更改为“多重选择器”。 我认为它们描述了它们要好得多的地方,但是,these,这些旧名称太根深蒂固,我们可能会坚持使用它们。

    2.剖析复选框和单选按钮 (2. Anatomy of checkboxes and radio buttons)

    While we will look at various selector types in this cheat sheet, we will focus on radio buttons and checkboxes. Below is their anatomy.

    虽然我们将在本备忘单中介绍各种选择器类型,但我们将重点介绍单选按钮和复选框。 以下是其解剖结构。

    Image for post
    Anatomy of radio buttons and checkboxes单选按钮和复选框的剖析

    Note: There is some discrepancy in which of the parts above are referred to as the ‘radio button’/’checkbox’. Sometimes people use ‘radio button’/’checkbox’ to refer to the label and the selector together, while other times they use the terms to refer to the selector alone. I prefer the latter.

    注意:上面的哪些部分被称为“单选按钮” /“复选框”,存在一些差异。 有时人们使用“单选按钮” /“复选框”来同时指代标签和选择器,而有时他们使用术语单独指代选择器。 我更喜欢后者。

    3.单选按钮和复选框之间有什么区别 (3. What is the difference between radio buttons and checkboxes)

    Radio buttons and checkboxes are very similar, except for a few key differences. The primary difference is that with radio buttons you can only select one item, while with checkboxes you can select any number. I was going to write out a table to explain this, but didn’t because a) it sounded boring, b) Medium doesn’t allow you to insert tables, so I had a better idea:

    单选按钮和复选框非常相似,除了一些关键区别。 主要区别在于,使用单选按钮只能选择一项,而使用复选框可以选择任何数字。 我打算写一张表来解释这一点,但是不是因为a)听起来很无聊,b)Medium不允许您插入表,所以我有一个更好的主意:

    POP QUIZ! Yay! Let’s see who can get 100% — winner gets to buy me an apple and call me ‘ma’am’.

    突击测验! 好极了! 让我们看看谁能获得100%的收益-获胜者可以给我买一个苹果,称我为“夫人”。

    ONE: In the standard checkbox component, how many items are you allowed to select (unless otherwise stated)?

    一个:在标准复选框组件中,允许您选择几项(除非另有说明)?

    1. 1

      1个
    2. 3

      3
    3. Unlimited

      无限
    4. 0

      0

    TWO: What is the shape of a radio button’s selector?

    二:单选按钮选择器的形状是什么?

    1. Square

      广场
    2. Circle

    3. Hexagon

      六边形
    4. Triangle

      三角形

    THREE: If you want to make a UI where a user can select multiple toppings to put on an ice cream, you would use:

    第三:如果要创建一个用户可以在其中选择多个浇头以放置冰淇淋的UI,则可以使用:

    1. Radio buttons

      单选按钮
    2. Checkboxes

      选框

    FOUR: If you want to make a UI where a user can select what type of bank account they would like to open, you would use:

    第四:如果要创建一个用户可以在其中选择他们想开设哪种银行帐户的用户界面,则可以使用:

    1. Radio buttons

      单选按钮
    2. Checkboxes

      选框

    FIVE: If you wanted to create a ‘subscribe to our emailer’ selector, which selector type would you use?

    五:如果您想创建“订阅我们的电子邮件发送者”选择器,您将使用哪种选择器类型?

    1. A radio button

      单选按钮
    2. A checkbox

      复选框

    SIX: In the below image, which is a radio button?

    六:在下图中,哪个是单选按钮?

    1. A

      一个
    2. B

    Image for post

    ANSWERS: ONE: 3. Unlimited TWO: 2. Circle THREE: 2. Checkboxes FOUR: 1. Radio buttons FIVE: 2. A checkbox SIX: 1. A

    答案:一个:3.无限两个:2.圈三:2.复选框四个:1.单选按钮五个:2.一个复选框六个:1. A

    WOOOOO you passed! (I hope.)

    你通过了! (我希望。)

    4.选择器的常见样式 (4. Common styles of selectors)

    These are some of the common styles of checkboxes and radio buttons that you will come across in your field trip through the internet.

    这些是复选框和单选按钮的常见样式,您在通过Internet进行实地考察时会遇到这些样式。

    标准样式(单选按钮/复选框) (Standard style (radio buttons/checkboxes))

    The most standard style of checkboxes and radio buttons uses buttons with ‘checkmarks’ or filled-in circles. I tend to prefer buttons with a checkmark UNLESS you are dealing with educational quizzes (see below).

    复选框和单选按钮的最标准样式使用带有“复选标记”或实心圆圈的按钮。 我倾向于使用带有复选标记的按钮,除非您正在处理教育性测验(请参阅下文)。

    Image for post
    Standard style with checkmarks带有复选标记的标准样式
    Image for post
    Standard style without checkmarks标准样式,不带对号

    测验按钮样式(单选按钮/复选框) (Quiz button style (radio buttons/checkboxes))

    When a user is answering questions in a quiz, we have to make sure of two things: 1) that they can clearly see what answers they are choosing, 2) that they don’t get confused about when they get feedback on their answer.

    当用户在测验中回答问题时,我们必须确保两件事:1)他们可以清楚地看到他们选择的答案,2)当他们对自己的答案获得反馈时不会感到困惑。

    If you look at the example below, you can see that the ‘checkmark’ can get confusing — it looks like those answers are correct, even though it hasn’t been graded yet.

    如果您看下面的示例,您会发现“复选标记”可能会令人困惑-看起来这些答案是正确的,即使尚未对其评分。

    Image for post
    Quiz selectors showing that having a checkmark causes confusion in eLearning测验选择器显示带有复选标记会引起电子学习的混乱

    基本图像样式(单选按钮/复选框) (Basic image style (radio buttons/checkboxes))

    While this style of selector can give the user a better idea of what they are selecting, I seldom use them as the image will always be too small to see clearly anyway.

    虽然这种选择器样式可以使用户更好地了解他们所选择的内容,但我很少使用它们,因为无论如何图像总是太小而看不清。

    Image for post
    Radio buttons and checkboxes with images. Photo credits (from unSplash): Hamburger by @amir_v_ali | Chicken burger by @amir_v_ali | Veggie burger by @swimstaralex | Cheese by @swimstaralex | Tomatoes by @lmablankers | Lettuce by @producteurslocaux
    单选按钮和带有图像的复选框。 图片来源(来自unSplash):@amir_v_ali的汉堡包| 鸡肉汉堡,来自@amir_v_ali | 蔬菜汉堡,@ swimstaralex | @swimstaralex提供的奶酪| 西红柿@lmablankers | 生菜@producteurslocaux

    网格样式的图像(单选/多选) (Image in a grid style (single/multi-select))

    I prefer this style to the basic image style as you are able to make the images a lot bigger, and it also just looks better.

    与基本图像样式相比,我更喜欢这种样式,因为您可以使图像更大,而且看起来也更好。

    Image for post
    Image grid selectors. Photo credits (from unSplash): Hamburger by @amir_v_ali | Chicken burger by @amir_v_ali | Veggie burger by @swimstaralex | Cheese by @swimstaralex | Tomatoes by @lmablankers | Lettuce by @producteurslocaux
    图像网格选择器。 图片来源(来自unSplash):@amir_v_ali的汉堡包| 鸡肉汉堡,来自@amir_v_ali | 蔬菜汉堡,@ swimstaralex | @swimstaralex提供的奶酪| 西红柿@lmablankers | 生菜@producteurslocaux

    I first became aware of this style in Buzzfeed’s quizzes. (If you have never heard of Buzzfeed’s quizzes — a whole new world of procrastination awaits you.) Here they just show the image and have no text. If you go with that layout, pretty please make sure that you have alt text for users who use a screen reader or have a poor internet connection.

    我首先在Buzzfeed的测验中意识到了这种风格。 (如果您从未听说过Buzzfeed的测验,那么整个拖延世界都在等待着您。)在这里,它们只是显示图像而没有文字。 如果使用这种布局, 请确保您为使用屏幕阅读器或互联网连接状况不佳的用户提供替换文字

    Image for post
    Example of a grid-style single selector. Screenshot from: https://www.buzzfeed.com/jessicamisener/which-sandwich-are-you
    网格样式单个选择器的示例。 屏幕截图来自: https : //www.buzzfeed.com/jessicamisener/which-sandwich-are-you

    多级复选框 (Multi-level checkboxes)

    Multi-level checkboxes are needed if the items need to be split up into groups. Also, notice that if only a few of the child items are selected, the parent category is only partially selected.

    如果需要将项目分成几组,则需要多级复选框。 另外,请注意,如果仅选择了几个子项,则仅部分选择了父类别。

    Image for post
    Multi-level checkboxes多级复选框

    One of the trickier UI elements around this is that the top item (parent) acts both as a selector and an accordion. So, if you click the label does it select the selector or does it open/close the accordion? I can’t find any definitive research on which way is the best, as this is a bit of an unusual pattern, but in the past, I have made the label part of the accordion and not the selector. Let me know if you have any suggestions for how to deal with this dilemma in the comments.

    与此相关的较为棘手的UI元素之一是,顶级项(父项)既充当选择器又充当手风琴。 因此,如果您单击标签,它是选择选择器还是打开/关闭手风琴? 我找不到关于哪种方法最好的确定性研究,因为这是一种不寻常的模式,但是在过去,我已经将标签设置为手风琴的一部分,而不是选择器的一部分。 如果您有任何关于如何解决此难题的建议,请告诉我。

    强制选择 (Forced selection)

    Sometimes you will only want to allow your users to select a certain number of an item. To force this, if the user clicks one more than the selected amount, their oldest selection will deselect and the recent selection will update.

    有时,您只希望允许用户选择一定数量的项目。 要强制执行此操作,如果用户单击的次数多于所选数量,则他们最早的选择将被取消选择,而最近的选择将被更新。

    Image for post
    Checkboxes with forced selection带有强制选择的复选框

    按钮样式(单选/多选) (Button style (single/multi-select))

    This style allows you to stack a whole lot of different items on top of each other, which means you get to save space and have more options. Because this pattern isn’t that common, I suggest that you let the user know how many options they can select. While there is no reason to not use this for single selectors, I have never seen it in the wild.

    这种样式使您可以将很多不同的项目彼此堆叠,这意味着您可以节省空间并有更多选择。 因为这种模式并不常见,所以建议您让用户知道他们可以选择多少个选项。 尽管没有理由不对单个选择器使用它,但我从未在野外看到它。

    Image for post
    Button style selector按钮样式选择器

    This style is very common when asking the user to choose multiple content tags (although they may not be aware of it). In the below example, Apple Music is asking users to select their favourite genres, which will in turn recommend songs and artists based on the user’s selection.

    当要求用户选择多个内容标签时,这种样式非常普遍(尽管他们可能不知道)。 在下面的示例中,Apple Music要求用户选择自己喜欢的流派,这将根据用户的选择推荐歌曲和歌手。

    Image for post
    Apple Music genre selection on register. Image credit: https://www.businessinsider.com/apple-will-shut-down-beats-music-on-november-30-2015-11?IR=T
    Apple Music流派选择已注册。 图片来源: https : //www.businessinsider.com/apple-will-shut-down-beats-music-on-november-30-2015-11?IR=T

    切换(单选) (Toggle (single select))

    The toggle is most often used for settings and allows the user to choose between yes/no options.

    切换开关最常用于设置,并允许用户在是/否选项之间进行选择。

    On mobile, the toggle itself usually sits on the far right while the label sits on the far left. This is to make it easier for the right thumb to change options.

    在移动设备上,切换开关本身通常位于最右侧,而标签位于最左侧。 这是为了使右手拇指更容易更改选项。

    Image for post
    Suhail Gupta / Audiini for picking this up!)Suhail Gupta / Audiini接过 !)

    5.国家 (5. States)

    Checkboxes and radio buttons have to change their state/appearance so that users know they have been selected. We need to add these little visual cues to nudge the user in the right direction using patterns that they already know and understand.

    复选框和单选按钮必须更改其状态/外观,以便用户知道已被选中。 我们需要添加这些小的视觉提示,以使用他们已经知道和理解的模式将用户向正确的方向移动。

    默认/有效 (Default/active)

    This is the starting state of selectors. This state indicates to the user that they can click the items in the questions.

    这是选择器的开始状态。 此状态向用户指示他们可以单击问题中的项目。

    Image for post
    Example of radio buttons and checkboxes in their default/active state
    单选按钮和复选框处于默认/活动状态的示例

    不活跃 (Inactive)

    When the inactive state is set, the user won’t be able to interact with the options. It is seldom that a user will encounter this state unless the product rules specify it.

    设置为非活动状态后,用户将无法与选项进行交互。 除非产品规则指定,否则很少有用户会遇到此状态。

    Image for post
    Example of radio buttons and checkboxes in their inactive state
    单选按钮和复选框处于非活动状态的示例

    徘徊 (Hover)

    Like buttons, selectors should indicate to the users that they are interactive or clickable. Usually this is done with highlighting the background of the item on hover. It also indicates what area of the items is clickable. If you hover off it, it should revert to its original state.

    像按钮一样,选择器应向用户指示它们是交互式的或可单击的。 通常,这是通过突出显示悬停项目的背景来完成的。 它还指示可单击项目的哪个区域。 如果将鼠标悬停在它上面,它应该恢复为原始状态。

    Image for post
    Example of radio buttons and checkboxes in their hover state
    单选按钮和复选框处于悬停状态的示例

    Don’t be a n00b tip: Touch devices don’t have a hover state.

    不要成为提示:触摸设备没有悬停状态。

    重点/突出显示 (Focus/highlighted)

    The focus or highlighted state is usually indicated with a blue halo around the clickable item. You can see this for yourself by tabbing through an interface — which is the same thing someone who is poor sighted or had poor motor skills would do. It is seldom that a user will encounter this state, unless before someone clicks ‘enter’ to select an item.

    焦点或突出显示状态通常在可点击项周围显示为蓝色光晕。 您可以通过在界面上切换来亲自看到这一点,这与视力不佳或运动技能较弱的人一样。 用户很少会遇到这种状态,除非在用户单击“输入”以选择一个项目之前。

    Image for post
    Example of radio buttons and checkboxes in their focus/highlight state
    单选按钮和复选框处于焦点/突出显示状态的示例

    按下 (Pressed)

    This is the state where the user holds down their mouse/finger and the item indicates back to the user that it is being clicked.

    这是用户按住鼠标/手指,并且该项目向用户指示其正在被单击的状态。

    Image for post
    Example of radio buttons and checkboxes in their pressed state
    单选按钮和复选框处于按下状态的示例

    已选 (Selected)

    Once the user has clicked an item, the UI should let them know. As mentioned earlier, radio buttons can only have one selected item, while checkboxes can have multiple, depending on business rules.

    用户单击项目后,UI应告知他们。 如前所述,根据业务规则,单选按钮只能选择一个项目,而复选框可以选择多个。

    Image for post
    Example of radio buttons and checkboxes in their selected state
    单选按钮和复选框处于选定状态的示例

    失败反馈 (Fail feedback)

    With free text input, it is possible for a user to make a typo, etc. However, since the options in a selector are predetermined, there should only be one type of fail feedback: the ‘incomplete’ type, which the user will only receive if they click the ‘submit’ button before they finished filling out the form. For checkboxes, this will only be necessary if the question forces them to choose one or more items.

    使用自由文本输入时,用户可以打错字等。但是,由于选择器中的选项是预先确定的,因此应该只有一种类型的失败反馈:“不完整”类型,用户只会如果他们在填写表单之前单击“提交”按钮,则会收到。 对于复选框,仅当问题迫使他们选择一项或多项时,才需要这样做。

    Image for post
    Example of radio buttons and checkboxes in their fail state
    单选按钮和复选框处于失败状态的示例

    6.标签文字规则 (6. Rules for label text)

    There is only one hard and fast rule for selector labels: be consistent.

    选择器标签只有一条硬性规定: 一致

    1. Make sure that the case on every selector label is the same (sentence case, title case, etc.)

      确保每个选择器标签上的大小写都相同(句子大小写,标题大小写等)
    2. Make sure that all items either end in a period or not.

      确保所有项目都在一个周期内结束。
    3. Try to make sure that all the items are either a sentence, phrase, or word. Try to avoid some options being sentences and others being single words. Using a combination makes it tricky to decide on what case and punctuation to use.

      尝试确保所有项目都是句子,短语或单词。 尽量避免某些选择是句子,而另一些则是单个单词。 使用组合使得很难决定要使用哪种情况和标点符号。
    Image for post
    Examples of item labels商品标签示例

    7.什么时候应该使用它们 (7. When you should use them)

    When should you use radio buttons or checkboxes? This relies entirely on what question you are asking. If you want your users to select multiple options, use checkboxes. If you want your users to select only one option, use radio buttons (or another alternative).

    什么时候应该使用单选按钮或复选框? 这完全取决于您要问什么问题。 如果希望用户选择多个选项,请使用复选框。 如果希望用户仅选择一个选项,请使用单选按钮(或另一种选择)。

    何时使用单选按钮 (When to use a radio button)

    I have four rules about when, or when not to, use radio buttons. They are:

    对于何时使用或何时不使用单选按钮,我有四个规则。 他们是:

    1. When you only want the user to select one itemIf you want the user to select more than one item then you should rather use checkboxes.

    1.当您只希望用户选择一项时,如果您希望用户选择一项以上,则应使用复选框。

    2. If you have fewer than six optionsDepending on your design rules, if there are more than five or six items to choose from, rather use a dropdown. Yes, yes, I know that they are clunky, but they save a lot of space in your design.

    2.如果您的选择少于六个 根据您的设计规则,如果要选择五个或六个以上的项目,请使用下拉菜单。 是的,是的,我知道它们很笨重,但是它们在您的设计中节省了大量空间。

    Image for post
    Comparison of a dropdown and radio buttons
    下拉菜单和单选按钮的比较

    That being said, if space isn’t an issue, maybe consider using radio buttons instead — particularly if you are designing for mobile. I have seen it work well for fast food deliveries.

    话虽如此,如果空间不是问题,则可以考虑改用单选按钮,尤其是在为移动设备设计时。 我已经看到它可以很好地用于快餐店。

    If you are interested in learning more about dropdowns, check out my previous cheat sheet here:

    如果您有兴趣了解有关下拉菜单的更多信息,请在此处查看我以前的备忘单:

    3. You want to force a selection of oneWhen you select an item in a radio button list, you can’t deselect it. You can select something else and change your selection, but you can’t un-answer the question once you have selected an answer.

    3.您想强制选择一个。当您在单选按钮列表中选择一个项目时,您不能取消选择它。 您可以选择其他内容并更改选择,但是一旦选择了答案,便无法取消答案。

    4. If the question only has two options that are yes/noIf your question is ‘Would you like to receive notifications?’, ‘Play background music?’ etc., then rather use a toggle. They take up much less space, are cleaner, and — because they are a newer selector type — they have the added bonus of being trendy.

    4.如果问题只有两个选项,则是/否。如果您的问题是“您想接收通知吗?”,“播放背景音乐?”。 等,然后使用切换键。 它们占用的空间少得多,更清洁,并且-因为它们是较新的选择器类型-因此,它们具有时髦的额外好处。

    Image for post
    Comparison of radio buttons and a toggle
    单选按钮和切换按钮的比较

    POST PUBLISH UPDATE:5. If you want your users to click ‘save’ to implement the optionIf you are in a settings page, or in a place where you want to allow the user to umm and err about their options before they click the big green save button - rather use radio buttons (or checkboxes). However, if you want your setting to happen immediately (turning wi-fi on/off) then rather use a toggle.

    发布后更新: 5.如果您希望用户单击“保存”以实现该选项,则如果您位于设置页面中,或者要允许用户在单击该菜单之前对其选项进行检查和编辑绿色的大保存按钮-宁可使用单选按钮(或复选框)。 但是,如果您希望设置立即生效(打开/关闭wi-fi),请使用切换开关。

    This suggestion comes from Thomas Veit, so go give them some claps in the comments below :)

    这个建议来自 Thomas Veit ,所以请在下面的评论中给他们一些鼓掌:)

    POST PUBLISH UPDATE:6. If your option’s labels are short, consider using a multiple-choice toggleYou very seldom see this cutie out in the wild, but it is a delight when you do. Multi-choice toggles merge the best of radio buttons and toggles into this little guy. Compact, neat and user friendly. I would only suggest using this if your labels are short — otherwise, it could get a bit hairy on mobile.

    发布后更新: 6.如果选项的标签较短,请考虑使用多项选择开关。您很少会在野外看到这种可爱的东西,但这样做时会很高兴。 多选切换器将最好的单选按钮合并在一起,切换到这个小家伙。 紧凑,整洁且用户友好。 我只建议您在标签较短的情况下使用此标签,否则在移动设备上可能会显得有些毛茸茸。

    Image for post
    Example of a multiple-choice toggle
    多项选择切换的示例

    This suggestion came from Thomas Weitz, so give them some claps in the comments below :)

    这个建议来自 Thomas Weitz ,因此请在下面的评论中给他们一些鼓掌:)

    何时使用复选框 (When to use checkboxes)

    I have two rules about when to use checkboxes, and here they are:

    关于何时使用复选框,我有两个规则,它们是:

    1. When you want the user to be able to select multiple options or none at allIf you want your user to be able to add multiple toppings to their pizza, this is the selector for you. The user could select all, some, or none of the checkboxes.

    1.当您希望用户能够选择多个选项或根本不选择任何选项时如果您希望用户能够向其披萨添加多个浇头,则这是您的选择器。 用户可以选择全部,部分或不选择任何复选框。

    2. Single item Follow-up pop quiz: Why is the ‘I have read the terms and conditions’ always a checkbox and not a radio button? Surely it makes sense for it to be a radio button as it is better for ‘yes/no’ type questions?

    2.单项后续流行测验:为什么“我已阅读条款和条件”始终是一个复选框,而不是一个单选按钮? 将它选为单选按钮肯定很有意义,因为它对“是/否”类型的问题比较好?

    Image for post

    Answer: Because you can deselect it. Unlike a radio button with only one item, where you can’t deselect it. If you click it, soz for you: it is now selected FOREVER.

    答:因为您可以取消选择它 。 与仅具有一项的单选按钮不同,您不能在其中取消选择它。 如果您单击它,将为您带来麻烦:现在将其永久选中。

    8.辅助功能清单 (8. Accessibility checklist)

    You’ve done it! You have completed designing your selectors, and it is time to ship it off to the development team. But wait! Have you checked that they are accessible first?

    你完成了! 您已经完成选择器的设计,是时候将其交付给开发团队了。 可是等等! 您是否检查过它们首先可以访问?

    1. Does your selector meet the WCAG AAA colour contrast standards? Some designers use the AA standards instead, but I’m far too paranoid for that. My current favourite contrast checker is WebAIM.

      您的选择器是否符合WCAG AAA色彩对比标准? 有些设计师改用AA标准,但我对此非常偏执。 我当前最喜欢的对比度检查器是WebAIM

    2. Are your options/items bigger than 44px for touch screens? (Differing reports use 36px.)

      您的触摸屏的选项/项目是否大于44px? (不同的报告使用36像素。)
    3. Is there more than 8px between each option/item?

      每个选项/项目之间的距离是否超过8px?
    4. Is the label/question always visible?

      标签/问题是否始终可见?
    5. Do the relevant fields have helpful feedback text? (E.g. “Please complete this question”)

      相关字段是否有有用的反馈文本? (例如“请完成此问题”)

    If you want to read more, check out: https://webaim.org/techniques/forms/controls

    如果您想了解更多信息,请查看: https : //webaim.org/techniques/forms/controls

    9.结束语 (9. Closing thoughts)

    After this cheat sheet, I am going to move away from ‘form’ UI patterns and move onto other types of UI patterns. BUT if you have any requests to look into any other form field types let a girl know in the comments.

    在这份备忘单之后,我将离开“表单” UI模式,转而使用其他类型的UI模式。 但是,如果您有任何查询其他任何表单字段类型的请求,请在注释中告知女孩。

    Stay safe out there Medium friends, the world is a crazy, crazy place right now.

    在那儿保持安全中型朋友,世界现在是一个疯狂的地方。

    翻译自: https://uxdesign.cc/ui-cheat-sheet-radio-buttons-checkboxes-and-other-selectors-bf56777ad59e

    eazy ui 复选框单选

    展开全文
  • checkbox复选框样式

    2015-07-02 12:35:00
    首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。 /** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; } ...
  • 下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式。 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要...
  • 关于复选框的样式,有一点是比较坑爹的,就是系统默认该样式无法被修改,我们能做的就是把原有的复选框给隐藏掉,再进行修改label样式,因为label能够关联我们的复选框,同时把我们想要的效果呈现出来。 Checkbox...
  • 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变它的外观。 要做到这一点需要添加一段代码到你的CSS文件中。 /** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; } ...
  • 这篇文章主要介绍了一些CSS的Checkbox复选框样式的代码分享,针对一些简单页面控件的设计,需要的朋友可以参考下 Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝...
  • CListCtrl中添加复选框

    2017-11-28 16:48:02
    1.首先建立一个对话框工程; 2.然后在对话框的OnInitDialog函数中添加以下代码: 3.项目熟悉listctrl的各种操作 ... //设置项的各列数据时也更改行标题,即行的第一列的文字   m_list.SetItemText
  • 复选框的新样式; 菜单的新样式; 更新了上下文菜单的样式; 选择框的新样式。 JMetro新版本详细信息 我决定暂时关闭对JMetro示例的关注。 不过,我仍然将控件的样式设置为看起来不错,并且在聚焦时具有...
  • 为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框。 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它。 演示地址 1.大前提 首先,需要添加一...
  • 复选框的新样式; 菜单的新样式; 更新了上下文菜单的样式; 选择框的新样式。 JMetro新版本详细信息 我决定暂时关闭对JMetro示例的关注。 不过,我仍然将控件样式设置为看起来不错,并...
  • 第十二回 JavaFX2.0 复选框CheckBox

    千次阅读 2011-10-22 20:28:15
    文本来自我的翻译文章... ... ...CheckBox类让你可以在应用中创建复选框。尽管复选框看起来很想单选框,但是它们并不能被放置进一个开关组中来实现很多选项的选择。你可以复习一
  • Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大...为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框。 在本教程中
  • 为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框。 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它。 css-style-checkboxes 查看演示,...
  • 属性说明Name复选框控件的名称Alignment设置标题文本的对齐方式, 取值为: 0 左对齐 1 右对齐Appearance是否用立体效果绘制,取值为: 0 平面 1 3D(立体)BackColor设置背景颜色,从弹出的调色板选择。Caption复选框...
  • 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变它的外观。 要做到这一点需要添加一段代码到你的CSS文件中。 /** * 隐藏默认的checkbox */ input[type=checkbox] { visibili...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,622
精华内容 1,448
关键字:

复选框的外观风格状态可通过