2

さて、私はこれに関する情報やそれが可能であるかどうかを検索しましたが、見つかりませんでした。さて、登録フォームを作成すると、このようなメールフィールドが表示されます。

<input type="email" id="email"/>

今では簡単なことですが、サーバー側に移動する前に、そこに入力されたいくつかのbsをフィルターで除外するのは単純なhtmlフィルターです。これまでに見たことがある場合はidkになりますが、これはフィールドの横にある一般的な矢印の付いたボックスです。特に私のサイトのレイアウトでは見栄えがよくありません。このいわゆるポップアップボックス/ウィンドウの外観を編集する方法はありますか？ありがとう！

4

1 に答える 1

2

Chromeでは次のスタイルを使用できるはずです。

/* The entire area of the popup including area outside the bubble shape */
 ::-webkit-validation-bubble{}
/* Portion above the bubble behind top arrow */
 ::-webkit-validation-bubble-arrow-clipper{}
/* The arrow at the top of the bubble */
 ::-webkit-validation-bubble-arrow{}
/* The area containing the validation message */
 ::-webkit-validation-bubble-message{}

これは、このStackOverflowの質問で参照されています。

デフォルトのスタイルは次のとおりです。

/* form validation message bubble */

::-webkit-validation-bubble {
    display: block;
    z-index: 2147483647;
    position: absolute;
    opacity: 0.9;
    line-height: 0;
    -webkit-text-security: none;
    -webkit-transition: opacity 05.5s ease;
}

::-webkit-validation-bubble-message {
    display: block;
    font: message-box;
    min-width: 50px;
    max-width: 200px;
    border: solid 2px black;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbf9f9), to(#f0e4e4));
    padding: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: 4px 4px 4px rgba(204,204,204,0.7);
    line-height: normal;
}

::-webkit-validation-bubble-top-outer-arrow {
    display: inline-block;
    position: relative;
    left: 14px;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 14px;
    border-bottom-color: black;
    border-right-color: transparent;
    border-top-width: 0;
    border-left-width: 0;
}

::-webkit-validation-bubble-top-inner-arrow {
    display: inline-block;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 10px; /* <border box width of outer-arrow> - <message border width> * 2 */
    border-bottom-color: #fbf9f9;
    border-right-color: transparent;
    border-top-width: 0;
    border-left-width: 0;
    position: relative;
    top: 2px; /* <message border width> */
    left: 2px; /* <outer-arrow position> + <message border width> - <border box width of outer-arrow>  */
}
于 2012-09-01T23:33:01.353 に答える