私は、まさにこのようにする必要があり、CSSを使用して、必要なフィールドの警告メッセージボックスを作成したいCSS

Question

を使用して、警告メッセージボックスを作成する -

これまでのところ、私はここthis- 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

何を示してきたことは `required`属性が設定されているときにChromeで表示されている標準のツールチップでこの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タグを使用しては

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

次のCSSでspanを使用しようと編集

私はスリカンス・レッディで答えから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

はこの1つ試してみてください：

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