選擇框的驗證CSS

我只是敲定了我們的表單驗證，並且我們在輸入元素等處發送了css（如果它們不驗證）。選擇框的驗證CSS

但不知道如何與輸入以外的其他元素作鬥爭。

例如，選擇和收音機和複選框。

通常我們的js是這樣的：

對於電子郵件字段。

if(email == "") $('#email').css({"background":"#efefef","border":"1px solid #F12B63"});

只是不確定爲什麼CSS驗證（錯誤）不起作用在選擇元素無線電和複選框......任何建議。驗證工作，只是沒有CSS部分

來源

2012-01-11 422

AFAIK，u樣式複選框和單選按鈕背景或邊框。 – Johan 2012-01-11 22:28:46

我認爲對於這些我們將不得不解僱一條消息，更多的是這些選擇讓我頭腦 – 422 2012-01-11 22:32:32

儘管你可以嘗試我的答案，但我認爲它最接近你會直接進入邊框的複選框/收音機 – Johan 2012-01-11 22:37:54

嘗試使用邊框屬性來代替：http://jsfiddle.net/Kqcx7/1/

來源

2012-01-11 22:32:19 Johan

試過這個，但不是爲我們工作。我有點思考禁用提交按鈕，除非複選框被勾選 – 422 2012-01-11 22:52:43

Border屬性不會爲所有的表單元素的工作。你必須在選擇框周圍添加一個包裝span/div。另一種方法是使用大綱屬性。

來源

2012-01-11 22:35:36

謝謝，已經發揮與此無濟於事 – 422 2012-01-11 22:53:04

選項1：您可以更改標籤顏色而不是更改輸入邊框。

選項2：使用javascript，css和images更改複選框和單選按鈕的外觀。有很多教程。

比方說您有這樣的形式：

<form method="post" action="/path/to/action" id="exampleForm"> 
    <div id="fullNameBlock"> 
    <label>Full Name:</label><input type="text" value="" name="fullname" > 
    </div> 
    <div id="emailBlock"> 
    <label>Email:</label><input type="text" value="" name="email" > 
    </div> 
    <input type="submit" value="Send" > 
</form>

，讓說你驗證上提交：

if(!validate()) { 

}

和您的電子郵件是錯誤的。一種選擇是做這樣的事情：

$("#emailBlock").find("label").css({color: "red"});

你也可以添加輸入下面隱藏的信息：

<div id="emailBlock"> 
    <label>Email:</label><input type="text" value="" name="email" > <br> 
    <span style="display:none;">Your email is invalid</span> 
</div>

，並顯示信息時出現錯誤：

$ （「#emailBlock」）找到（「跨度」）顯示（）。;

您可以檢查這些指南進行自定義複選框和單選按鈕：

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-按鈕/ http://www.dailycoding.com/Posts/customized_html_controls_creating_custom_checkbox.aspx http://blogs.digitss.com/javascript/jquery-javascript/jquery-fancy-custom-radio-and-checkbox/

來源

2012-01-11 22:36:50

謝謝@Taro不知道如何觸發標籤CSS變化 – 422 2012-01-11 22:53:36

我添加了一個示例和一些鏈接，希望這可以幫助 – 2012-01-12 12:46:05

使用jQuery，你可以簡單地改變選擇（下拉的邊界）輸入。

$('#selectId').parent().css('border-color','red');

來源

2015-07-23 12:35:38 Tony

選擇框的驗證CSS

回答

相關問題