css复选框样式_使用CSS样式复选框
css復(fù)選框樣式
Introduction:
介紹：
Sometimes we want to develop a website or web page that would contain a form and through that form, we want to get some information from the user. Now that information could be of any type depending on the kind of form that you have created on your web page or website. Although there might be times when there is no use of forms on your website or web page, however, one must use forms wherever needs are, for example, conducting a survey, or taking personal information of the user and much more. Now when we are creating forms on our web page or website, we often see the use of checkboxes or radio buttons, which brings us to the topic styling Checkboxes using CSS.
有時我們想開發(fā)一個包含表單的網(wǎng)站或網(wǎng)頁，并希望通過該表單從用戶那里獲取一些信息。 現(xiàn)在，該信息可以是任何類型，具體取決于您在網(wǎng)頁或網(wǎng)站上創(chuàng)建的表單的類型。 盡管有時可能不使用網(wǎng)站或網(wǎng)頁上的表格，但是，無論在何處，例如進(jìn)行調(diào)查或獲取用戶的個人信息等等，都必須使用表格。 現(xiàn)在，當(dāng)我們在網(wǎng)頁或網(wǎng)站上創(chuàng)建表單時，經(jīng)常會看到復(fù)選框或單選按鈕的使用 ，這使我們進(jìn)入使用CSS設(shè)置復(fù)選框樣式的主題。
Now as we all know checkboxes are used widely in any website or web page, whether you are creating a form or not, checkboxes can be used for many reasons. But what if we wish to style our those boring checkboxes? That would be pretty awesome right? So let it be known that there is no particular property or method to achieve this task. So what do we do? Well, no one is a developer if there is no creativity. So let us move forward and see how we can style the checkboxes using CSS.
現(xiàn)在，眾所周知，無論您是否創(chuàng)建表單， 復(fù)選框都廣泛用于任何網(wǎng)站或網(wǎng)頁中，由于多種原因，可以使用復(fù)選框 。 但是，如果我們希望為那些無聊的復(fù)選框設(shè)置樣式呢？ 那真是太棒了吧？ 因此，讓我們知道沒有特定的屬性或方法可以完成此任務(wù)。 那么我們該怎么辦？ 好吧，如果沒有創(chuàng)造力，沒有人是開發(fā)人員。 因此，讓我們繼續(xù)前進(jìn)，看看如何使用CSS設(shè)置復(fù)選框的樣式 。
Steps:
腳步：
There are several steps that you might need to follow to style your checkbox, so follow along!
您可能需要遵循幾個步驟來設(shè)置復(fù)選框樣式，所以請繼續(xù)！
First, you need to hide the input element: In order to do that, you must set the opacity of the element to 0, as that would help in making the element invisible beside all the event listeners will work.
首先，您需要隱藏輸入元素 ：為此，必須將元素的不透明度設(shè)置為0，因為這將使該元素在所有事件偵聽器都可以工作的地方不可見。
Next, you need to add a span element: We are using span as placeholder element here, we would be using span over block element like div because it is known to be an inline element that won't take up the entire width.
接下來，您需要添加一個span元素 ：我們在這里使用span作為占位符元素，我們將在像div這樣的塊元素上使用span，因為它被認(rèn)為是不會占據(jù)整個寬度的內(nèi)聯(lián)元素。
Now, that's not all! If you want to show some transition to your checkbox, then go ahead and add some ripple effect.
現(xiàn)在，還不止這些！ 如果要向復(fù)選框顯示一些過渡，請繼續(xù)添加一些波紋效果。
Sum up:
總結(jié)：
So, follow these steps and you will be able to style your checkboxes. As you can see that there is not a direct method to achieve it but with the help of the above-mentioned steps you can achieve this task.
因此，請按照以下步驟操作，您將能夠設(shè)置復(fù)選框的樣式。 如您所見，沒有直接方法可以實現(xiàn)此目的，但是借助上述步驟，您可以實現(xiàn)此任務(wù)。
To summarize it all, first, you need to hide the element by setting the opacity to 0 and the next step is to add a span element as a placeholder.
總結(jié)一下，首先，您需要通過將不透明度設(shè)置為0來隱藏元素，下一步是添加一個span元素作為占位符。
Example:
例：
<!DOCTYPE html><html><head><style>.label1 {display: block;position: relative;padding-left: 45px;margin-bottom: 15px;cursor: pointer;font-size: 20px;}input[type=checkbox] {visibility: hidden;}.span1 {position: absolute;top: 0;left: 0;height: 35px;width: 35px;background-color: red;}.label1:hover input ~ .span1 {background-color: black;}.label1 input:active ~ .span1 {background-color: red;}.label1 input:checked ~ .span1 {background-color: green;}.span1:after {content: "";position: absolute;display: none;}.label1 input:checked ~ .span1:after {display: block;}.label1 .span1:after {left: 8px;bottom: 5px;width: 6px;height: 12px;border: solid white;border-width: 0 4px 4px 0;transform: rotate(45deg);}</style> </head><body><h1>Is IncludeHelp helpful?</h1><label class="label1">Yes<input type="checkbox"><span class="span1"></span></label><label class="label1">Definitely Yes<input type="checkbox" checked="checked"><span class="span1"></span></label> </body></html>Output
輸出量
In the above example, if you hover your mouse over the Yes checkbox you can see the red color turned to black.
在上面的示例中，如果將鼠標(biāo)懸停在“是”復(fù)選框上，您會看到紅色變?yōu)楹谏?。
翻譯自: https://www.includehelp.com/code-snippets/styling-checkbox-using-css.aspx
css復(fù)選框樣式
總結(jié)
以上是生活随笔為你收集整理的css复选框样式_使用CSS样式复选框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java enummap_Java En
- 下一篇： c语言宏函数怎么传递宏参数_C语言中的宏