HTML5フォームの必須フィールドのデフォルトのポップアップをオーバーライドするにはどうすればよいですか?
例: http://jsfiddle.net/uKZGp/ (ポップアップを表示するには送信ボタンをクリックしてください)
HTML
<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>
注:Google ChromeまたはFireFoxのようなHTML5ブラウザーでこれを表示する必要があります。
このリンクは私の質問を解決しませんが、誰かが箱の外で考えるようにするかもしれません:
HTML5/CSS3のみで検証スタイルを変更することは不可能です。
これはブラウザの一部です。変更することがわかった唯一の属性は、この例を使用したエラーメッセージです。
document.getElementById("name").setCustomValidity("Lorum Ipsum");
ただし、この例に示すように、 http://jsfiddle.net/trixta/qTV3g/ の場合、jQueryを使用してパネルスタイルをオーバーライドできます。これはプラグインではなく、コア機能であり、 Webshims と呼ばれるDOMライブラリと、もちろん、ポップアップのスタイルを設定するためのCSSを使用します。
これで非常に便利な例が見つかりました bug postImprove form validation error panel UI
。
これはあなたが見つけることができる最良の解決策であり、基本的な(ugい)エラーパネルを上書きする唯一の方法だと思います。
よろしく。
理由はわかりませんが、::-webkit-validation-bubble-message { display: none; }
は私には機能しません。無効なイベント(バブルしない)のデフォルトの動作を防止することで、目的の結果(FF 19でテスト済みChromeバージョン29.0.1547.76 m)を取得できました。
document.addEventListener('invalid', (function(){
return function(e){
//prevent the browser from showing default error bubble/ hint
e.preventDefault();
// optionally fire off some custom validation handler
// myvalidationfunction();
};
})(), true);
それが他の人を助けることを願っています-私はこれをどこでも見ました。
Webkitの場合、::-webkit-validation-bubble-message
。たとえば、非表示にするには:
::-webkit-validation-bubble-message { display: none; }
もあります:
::-webkit-validation-bubble-arrow-clipper{}
::-webkit-validation-bubble-arrow{}
::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}
更新:Chromeはフォーム検証バブルのスタイリングを許可しなくなりました: https://code.google .com/p/chromium/issues/detail?id = 25905
Firefoxの場合は、:-moz-placeholder {}
。
現在のデフォルトの電子メール検証は、現在、Googleのデザインを見た中で最もdesignいものの1つです。
ただし、標準のdiv
に含まれているようですので、これらの値をリセットすることを覚えていれば、いくつかの変更を加えることができます。
背景、フォントサイズと色、境界線と影を変更できることがわかりました。
div {
background: rgba(0,0,0,0.8);
color: #333;
font-size: 11px;
border: 0;
box-shadow: none;
}
その後、これらをhtmlタグ内のdivで上書きすると、検証のみが最終的に影響を受けます。
html div {
background: rgba(0,0,0,1);
color: #000;
font-size: 12px;
}
残念ながら、margin
やfont-weight
など、変更したいキー属性の一部は変更できません。
NB。現在、この手法はChrome(12)、つまりFirefox 4、Opera 11またはSafari(Win 7)では機能しません。
入力タイプにクラスを追加しました。そこにメッセージを表示しました。少しカスタマイズした後に役立つことを願っています。作業コードペン:
document.querySelector('#frm').addEventListener('submit', e => {
e.preventDefault();
e.currentTarget.classList.add('submitted');
});
body {
font-family: Helvetica, sans-serif;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
width: 100%;
height: 100vh;
background: #ffa500;
}
form > div {
position: relative;
margin-bottom: 10px;
}
.theTooltip {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: opacity, visibility;
max-width: 250px;
border-radius: 5px;
background-color: rgba(0,0,0,0.7);
padding: 15px;
color: #fff;
box-sizing: border-box;
display: inline-block;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate(15%, -50%);
transform: translate(15%, -50%);
top: 50%;
left: auto;
right: auto;
bottom: auto;
visibility: hidden;
margin: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
z-index: 100;
}
.theTooltip:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 50%;
margin-top: -10px;
left: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid rgba(0,0,0,0.7);
}
label {
display: inline-block;
vertical-align: center;
}
input {
background: #fff;
border: 1px solid transparent;
cursor: pointer;
display: inline-block;
overflow: visible;
margin: 0;
outline: 0;
vertical-align: center;
text-decoration: none;
width: auto;
border-radius: 3px;
cursor: text;
padding: 7px;
}
input:focus,
input:active {
outline: none;
}
.submitted input:invalid {
border: 1px solid #f00;
}
.submitted input:invalid ~ .theTooltip {
visibility: visible;
opacity: 1;
}
.submitted input:valid ~ .theTooltip {
-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
transition: opacity 0.3s, visibility 0s 0.3s;
}
<form id="frm" action="action">
<div>
<label>Email</label>
<input type="email" required="required"/><span class="theTooltip">Invalid email</span>
</div>
<div>
<button formnovalidate="formnovalidate">OK</button>
</div>
</form>
これはかなり古い質問であることを理解していますが、このライブラリを見つけたのは、これを見つける他の人にとって有益だと思うからです。