使用 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;
}

但我希望它和上图完全一样，我不介意它是否与下一个字段重叠并且它应该出现在与上面相同的位置image.I知道这是html required field validator message box 但它对我来说效果不佳，所以我正在创建一个完全一样的。提前致谢。

Answer 1

我想，您是在寻求 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 Reddy 的回答中的 CSS，这是您更新的 jsfiddle。 https://jsfiddle.net/352k4ope/3/

编辑 2

添加了白色三角形周围的橙色边框。 https://jsfiddle.net/352k4ope/5/

Answer 2

这里是解决方案....

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 3

试试这个：

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

Answer 4

试试这个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;
}

使用 css 创建警告消息框

Creating a warning message box using css

html

css

jquery

messagebox

requiredfieldvalidator