精华内容
下载资源
问答
  • 2020-12-18 17:51:11

    属性说明

    Name复选框控件的名称

    Alignment设置标题文本的对齐方式, 取值为:  0 左对齐  1 右对齐

    Appearance是否用立体效果绘制,取值为:  0 平面  1 3D(立体)

    BackColor设置背景颜色,可从弹出的调色板选择。

    Caption复选框控件的标题,此标题也支持快捷键

    CauseValidation该控件获得焦点时,失去焦点的控件的Validate事件是否发生。取值为:  True 发生  False 不发生

    DataField获得或设置一个值,将控件绑定到当前记录的一个字段

    DataFormat返回数据格式对象,用于该部件的可绑定性(打开属性页)

    DataMember获得或设置一个值,为数据连接描述数据成员

    DataSource设置一个数值,指出数据控件通过它将当前控件绑定到数据库

    DisablePictureStyle=1时, 该控件对象在不可用状态时显示的图片

    DownPictureStyle=1时, 该控件对象在被按下状态时显示的图片

    DragIcon该对象在拖动过程中鼠标的图标

    DragMode该对象的拖动模式,取值为:  0 Manual(手动)  1 Automatic(自动)

    Enabled用于设定是或对事件产生响应,取值为:  True 可用  False 不可用,在执行程序时,该对象用灰色显示,并且不响应任何事件

    Font字型,可从弹出的对话框选择字体,大小和风格

    ForeColor前景颜色,可从弹出的调色板选择。

    Height复选框控件的高度

    HelpContextID指定一个对象的缺省帮助文件上下文标识符

    Index在对象数组中的编号

    Left距离容器左边框的距离

    MaskColorStyle=1时,获得或设置复选框的图片要"屏蔽"(它是,透明的) 的颜色。可从弹出的调色板选择。

    MouseIconMousePointer=99时,设定一个自定义的鼠标图标

    MousePointer设置鼠标在控件内指针样式

    OLEDropMode获得或设置该对象是否能作为一个OLE放下目标,取值为:  0 None(无)  1 Manual(手动)

    PictureStyle=1时,设置此对象上的图片

    RightToLeft文本书写是否自左向右。取值为:  True  False 自右向左

    Style设置对象的外观形式, 取值为:  0 Standard(标准, 标准风格)  1 Graphical(图形,带有自定义图片),此时Picture,DisabledPicture和DownPicture属性起作用

    TabIndex获得或设置此对象在父窗体的编号(父窗体中对象响应Tab键的顺序)

    TabStop设置是否可以用"Tab"键选取此对象。取值为:  True 可以  False 不可以

    Tag存储程序所需的附加数据

    ToolTipText设置该对象的提示行

    Top距容器顶部边界的距离

    UseMaskColorStyle=1时,获得或设置一个值,决定是否将MaskColor属性中赋值的颜色用于"屏蔽"。(即, 用于创建透明区。)取值为:  True或False

    Value设置复选框处在什么状态。复选框控件有三种状态:  0 Unchecked 未选定  1 Checked 选定  2 Graved 灰色

    Visible设置此对象的可见性, 取值为:  True 该对象可见  False 该对象不可见

    WhatsThisHelpID获得或设置与对象相关联的上下文号

    Width设置该对象的宽度

    更多相关内容
  • 下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式。...此复选框风格就像一个解锁滑块,滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮(label标签)
  • 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for...

    这次给大家带来CSS设置Checkbox复选框的样式,CSS设置Checkbox复选框样式的注意事项有哪些,下面就是实战案例,一起来看一下。

    3855e9901c510a6c2c764683367e7bf7.png

    首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。

    e2719dacc89abdf5be85466ac3d17707.png

    隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中。这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框。

    样式一

    ceaca0d65f023314781dd9da5deba038.png

    此复选框风格就像一个解锁滑块,滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮(label标签),将会选中复选框,然后滑块移动到ON位置。

    我们开始创建复选框区的HTML。

    6638f6c89517ad9a5680d63ecf5d7db9.png

    因为这个样式的复选框,一个label不足以完成任务,我们用一个p元素包含checkbox,我们需要使用它们来做黑色条带和圆角。

    a43b511bc5aa7c5da6a69718983242cf.png

    现在,我们可以把label作为条带上的滑块,我们希望按钮效果是从条带的一侧移动到另一侧,我们可以添加label的过渡。

    daf73e0f33d66531e3a575d036fd9977.png

    现在这个滑块在选中(关闭)位置,当我们选中复选框,我们希望有一个反应发生,所以我们可以移动滑块到另一端。我们需要知道,判断复选框被选中,如果是则改变label元素的left属性。

    0d7cdac1502690a89aa92cdd2c6fa8a4.png

    这就是你需要的第一个Checkbox复选框的CSS。

    样式二

    86b1d70270186283688fa42b812cda77.png

    此复选框风格像样式一样,但不同的是,这个滑块按钮会改变颜色。当您单击滑块按钮,它移动到条带的另一边,并改变按钮的颜色。

    HTML代码和样式一是完全一样的。

    57660448bca901af2feda0cd4a0e96ca.png

    这个p会变成比样式一大一些的条带,label依然是作为滑块,使用下面的CSS来定义它。

    这个样式中间有一个黑色的条,滑块会沿着它左右滑动,但是p元素已经使用了,所以我们需要用:before伪类创建一个新的元素。

    f78f961098310bbc8f1c6e69c684a3c2.png

    和样式一一样,接下来我们为label写CSS样式,把它用作滑块。

    3d99a33bce48ee1196ffb04df6fcae27.png

    我要实现和样式一差不多的选中状态,当选中时改变label的left和background属性。

    ecfb6edd192c732a01b963510a075ddd.png

    样式三

    328f065ba4eb5b8781a26d49eaa6c15b.png

    这个复选框的样式比样式二更复杂一些,它和前面的例子一样会左右滑动,并且当改变选中和未选中的状态时,滑块滑动到另一侧并且在原位置显示对应的文本。

    首先,我们写HTML代码,这和前面是相同的。

    0e3fbc5f04b2577ba61d30d43d31aa36.png

    然后,我们用相同的方式把p作为滑块,下面的代码会创建一个黑色圆角的条带,我们可以把滑块和文本放到里面。

    9e21dfba4d04b170b8e43a0248a82e54.png

    当滑块处于未选中状态时,滑块会在左侧,并且右边显示”OFF”,当点击的时候,滑块移动到右侧,左侧显示”ON”。

    但是元素数量不足以让我们实现这些功能,所以我们要用:before和:after两个伪类创建两个元素,分别放置”ON”和”OFF”。

    e294f15a50c2814df8b28822472ffa5d.png

    和前面一样,我们来添加滑块的样式,当被点击时它会移动到另一侧,并且改变颜色。

    db557dca4c91661cb7892f80baac38dc.png

    样式四

    5a027c7fbb57a95110b81b7aa3845a31.png

    在这个样式中,我们会创建两个圆形,当点击时改变里面的圆形的颜色表示选中与未选中的状态。

    和前面一样的HTML代码。

    a9caf2472e5290e65a861a2682b01d99.png

    接下来我们要为checkbox创建外面的圆形,使用CSS的border-radius属性,并且设置为100%就可以创建一个正圆形。

    8992dda2a57494635218f396190caf6e.png

    然后我们用label元素来创建一个小一点的圆形,它会根据checkbox状态来改变颜色。

    acb1f47e0716cce613f48f02fd606d4e.png

    样式五

    3a623b57bd39529c9c125c35f231e49b.png

    这个复选框的样式有些不同,它看起来只是比浏览器默认的checkbox样式稍微好了些,但是不同的是我们可以根据自己的需要来定义它的样式了。

    首先还是一样的HTML代码

    在前面的例子中,我们把p作为checkbox的滑动条带或者外部的圆圈,但是这一次我们不需要了,可以使用p元素来设置复选框的区域。

    3adbffe6f108ff5a909b5a828696d498.png

    label标签用于Click事件和我们要定义的复选框的方框样式。

    01441c26f168570ac5feb74c5fc148bd.png

    接下来,我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px x 9px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后,它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下,这样看起来就像是一个对勾。

    866dbbe5d8311bc8aa8ab948243c1b28.png

    在上面的CSS中,我们已经设置它的透明度为0.2,所以你会看到的复选框有一个半透明的对勾。你可以在悬停的时候加深一点,在选中时,可以把设置为不透明。

    be8181b42f6a3581f81ce03a13679764.png

    这将会为你创建全新的checkbox复选框样式。

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    展开全文
  • 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 按钮隐藏复选框

    展开全文
  • 这是一款效果非常炫酷的CSS3复选框checkbox动画特效。这组复选框动画特效共3种效果,它们都是在原生checkbox元素的基础上进行了美化,在用户点击复选框的时候制作出非常酷的动画效果。使用方法HTML结构普通的...

    这是一款效果非常炫酷的CSS3复选框checkbox动画特效。这组复选框动画特效共3种效果,它们都是在原生checkbox元素的基础上进行了美化,在用户点击复选框的时候制作出非常酷的动画效果。

    使用方法

    HTML结构

    普通的HTML checkbox复选框控件的样式非常的平淡。在现代网页设计中,我们可以通过CSS3来为它设置更加漂亮的外观和动画特效。通过CSS的@keyframe属性,我们就可以制作出各种神奇的复选框动画特效。

    在这些复选框动画的DEMO中,使用的都是无序列表结构。每一个列表项中都带有一个元素和一个元素。

    • 项目经理

    • 网页设计师

    • 网站技术员

    • SEO

    • IT技术员

    • 客户服务代表

    CSS样式

    在CSS样式中,首先将原生checkbox隐藏起来。

    input[type="checkbox"] {

    display: none;

    }

    然后在label元素上设置相对定位和一些padding值。接着需要使用到label元素的:before和:after伪元素,由于这里要使用到Font Awesome字体图标,所以将它的字体设置为FontAwesome。

    /* Checkbox Icons */

    label {

    position: relative;

    padding-left: 30px;

    font-size: 30px;

    cursor: pointer;

    color: #fff;

    padding: 16px 28px 0 0;

    }

    label:before, label:after {

    font-family: FontAwesome;

    font-size: 50px;

    /*absolutely positioned*/

    position: absolute; top: 0; left: -49px; right: 10px;

    }

    接下来要做的事情是分别设置:before和:after伪元素为复选框选中和未选中状态时使用的图标。为了在CSS中使用 Font Awesome图标,这里使用的是unicode版本的图标(所有Font Awesome字体图标和它的unicode值可以参考这里)。

    label:before {

    content: '\f096'; /*未选中状态的复选框 */

    }

    label:after {

    content: '\f00c'; /*选中状态的复选框*/

    max-width: 0;

    overflow: hidden;

    opacity: 0.5;

    font-size: 27px;

    top: 16px;

    left: -42px;

    color: #f2ca27;

    -webkit-transition: all 0.50s;

    -moz-transition: all 0.50s;

    -o-transition: all 0.50s;

    transition: all 0.50s;

    }

    最后,通过checkbox hack技术,使复选框被选择的时候,label:after伪元素产生动画效果。

    input[type="checkbox"]:checked + label:after {

    max-width: 25px;

    opacity: 1;

    margin-right: 90px;

    }

    以上是第一个DEMO的CSS代码,其它两个DEMO的制作方法基本相同,可以参考下载的源文件。

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

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

    2017-11-28 16:48:02
    1.首先建立一个对话框工程; 2.然后在对话框的OnInitDialog函数中添加以下代码: 3.项目熟悉listctrl的各种操作 ... //设置项的各列数据时也更改行标题,即行的第一列的文字   m_list.SetItemText
  • 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...
  • 下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式。 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要...
  • 复选框的新样式; 菜单的新样式; 更新了上下文菜单的样式; 选择框的新样式。 JMetro新版本详细信息 我决定暂时关闭对JMetro示例的关注。 不过,我仍然将控件的样式设置为看起来不错,并且在聚焦时具有...
  • 通过CSS可以轻松自定义复选框外观 。 即使这样,自定义仅影响box和check样式 。 要使用真正不同的设计自定义复选框,需要进行大量编码。 不过,在Switchery的帮助下,复选框自定义已成为小菜一碟。 它能够自动...
  • 使用的教材是java核心技术卷1,我将跟着这本书的章节同时配合视频资源来进行学习基础java知识。 day078 Swing用户界面组件(四:选择组件)(复选框、单选钮、边框、组合框、滑动条) ...
  • checkbox复选框样式

    2015-07-02 12:35:00
    首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。 /** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; } ...
  • 命令按钮、单选按钮、复选框上都有Picture属性,选项: a、Appearance属性 b、Style属性 c、DisabledPicture属性 d、Downb。VB实现点击命令按钮将对单选(复选)按钮的选择状态Private Sub Form1_Load(sender As ...
  • 关于复选框的样式,有一点是比较坑爹的,就是系统默认该样式无法被修改,我们能做的就是把原有的复选框给隐藏掉,再进行修改label样式,因为label能够关联我们的复选框,同时把我们想要的效果呈现出来。 Checkbox...
  • 纯CSS自定义Html中Checkbox复选框样式

    千次阅读 2017-11-14 16:07:00
    首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变它的外观。 要做到这一点需要添加一段代码到你的CSS文件中。 /** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; } ...
  • 这篇文章主要介绍了一些CSS的Checkbox复选框样式的代码分享,针对一些简单页面控件的设计,需要的朋友可以参考下 Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝...
  • 复选框的新样式; 菜单的新样式; 更新了上下文菜单的样式; 选择框的新样式。 JMetro新版本详细信息 我决定暂时关闭对JMetro示例的关注。 不过,我仍然将控件样式设置为看起来不错,并...
  • 为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框。 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它。 css-style-checkboxes 查看演示,...
  • 为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框。 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它。 css-style-checkboxes 查看演示,可以看到...
  • 为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框。 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它。 演示地址 1.大前提 首先,需要添加一...
  • Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大...为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框。 在本教程中

空空如也

空空如也

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

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