用css

Question

創建一個警告消息框，我想創建一個使用CSS必填字段的警告消息框，這應該是完全一樣 -

到目前爲止，我已經實現了這個有點像這個 - https://jsfiddle.net/payalsuthar/352k4ope/ 這裏是我的HTML代碼 -

Name:<input type="text" placeholder="name" id="name"><br> 
<div id="errname"><p id="sym">!</p>Please fill out this field.</div> 

Address:<textarea></textarea> 
<input type="submit" value="submit" /> 

這裏是我的CSS -

#errname{ 
    border:1px solid orange; 
    border-radius:4px; 
    width:250px; 
    margin-top=100px; 
    background-color:white; 
    font-size:15px; 
    padding:10px; 
} 
#sym{ 
    width:18px; 
    text-align:center; 
    background-color:darkorange; 
    color:white; 
    font-weight:bold; 
    font-size:14px; 
    border:1px solid white; 
} 

但我希望它是完全一樣上面的圖片，我不介意它是否與下一個字段重疊，它應該出現在上圖中的相同位置。我知道這是html必填字段驗證器消息框但它不能正常工作，所以我是創造一個完全一樣的。 在此先感謝。

Answer 1

試試這個https://jsfiddle.net/352k4ope/4/

#name { 
    position: relative; 
} 

#name::before { 
    position: absolute; 
    top: 20px; 
    left: 60px; 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    line-height: 0; 
    font-size: 0; 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent; 

    border-bottom: 10px solid white; 
} 

#name::after { 
    content: url('http://67.media.tumblr.com/fdeec9480199afb3c6ed9c24b2aec9c5/tumblr_oaayc9r25Z1vaudwko1_75sq.png')' Please fill out this field.'; 
    font-family: arial; 
    font-size: 14px; 
    line-height: 50px; 
    padding: 0 10px; 
    vertical-align: top; 
    width: 170px; 
    height: 50px; 
    position: absolute; 
    background-color: white; 
    top: 30px; 
    left: 50px; 
} 

Answer 2

我想，你正在尋求CSS幫助。 而不是使用p標籤的嘗試使用span與下面的CSS

#sym { 
background-color: darkorange; 
color: white; 
font-weight: bold; 
font-size: 14px; 
border: 1px solid white; 
padding: 2px 5px 2px 5px; 
margin-right: 8px; 
} 

編輯

我已經從SRIKANTH雷迪的答案使用的CSS，這裏是你更新的jsfiddle。 https://jsfiddle.net/352k4ope/3/

編輯2

新增周圍的白色三角形橙色邊框。 https://jsfiddle.net/352k4ope/5/

Answer 3

這裏的解決方案....

的CSS

.input-block { 
    position: relative; 
} 
.error-block { 
    position: absolute; 
    top: 100%; 
    left: 50px; 
    border:1px solid orange; 
    border-radius:4px; 
    width:250px; 
    background-color:white; 
    font-size:14px; 
    padding:10px; 
} 
.error-block::before { 
    content: ''; 
    position: absolute; 
    top: -20px; 
    left: 20px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 10px; 
    border-color: transparent transparent orange; 
} 
.error-icon { 
    width:18px; 
    text-align:center; 
    background-color:darkorange; 
    color:white; 
    font-weight:bold; 
    font-size:14px; 
} 

的Html

<div class="input-block"> 
    Name:<input type="text" placeholder="name" id="name"> 
    <div class="error-block"><span class="error-icon">!</span>Please fill out this field.</div> 
</div> 

Answer 4

試試這個：

HTML：

<form> 
    <ul class="errorMessages"></ul> 

    <div> 
     <label for="name">Name:</label> 
     <input id="name" type="text" required> 
    </div> 

    <div> 
     <label for="comments">Address:</label> 
     <textarea id="comments" required></textarea> 
    </div> 

    <div class="buttons"> 
     <button>Submit</button> 
    </div> 
</form> 

jQuery的

var createAllErrors = function() { 
      var form = $(this), 
       errorList = $("ul.errorMessages", form); 

      var showAllErrorMessages = function() { 
       errorList.empty(); 

       // Find all invalid fields within the form. 
       var invalidFields = form.find(":invalid").each(function(index, node) { 

        // Find the field's corresponding label 
        var label = $("label[for=" + node.id + "] "), 
         // Opera incorrectly does not fill the validationMessage property. 
         message = node.validationMessage || 'Invalid value.'; 

        errorList 
         .show() 
         .append("<li><span>" + label.html() + "</span> " + message + "</li>"); 
       }); 
      }; 

      // Support Safari 
      form.on("submit", function(event) { 
       if (this.checkValidity && !this.checkValidity()) { 
        $(this).find(":invalid").first().focus(); 
        event.preventDefault(); 
       } 
      }); 

      $("input[type=submit], button:not([type=button])", form) 
       .on("click", showAllErrorMessages); 

      $("input", form).on("keypress", function(event) { 
       var type = $(this).attr("type"); 
       if (/date|email|month|number|search|tel|text|time|url|week/.test (type) 
        && event.keyCode == 13) { 
        showAllErrorMessages(); 
       } 
      }); 
     }; 

     $("form").each(createAllErrors); 

DEMO HERE