-1

トピック：
ドラッグ/ドロップ値を受け入れるためにいくつかのdivを作成し、入力のように見えるようにスタイルを設定しています。
Firefoxではすべてが美しくレンダリングされます。
ただし、Chromeでは、境界線とボックスシャドウが正しくレンダリングされません。（私はChm v.24にいます、ところで）

目標：
何よりも、私はそれが機能することを望んでいます。
しかし...私は私がもっと良いことをする方法についての提案を得るのと同じくらい幸せです:)

注：
これはオフィス内アプリ用です。ここで公式にサポートされているブラウザはFireFoxとChromeだけなので、すべてのブラウザ間の互換性は間違いなく素晴らしいですが、私はこれら2つにコーディングするだけで済みます。

コード： ここjsFiddleにも表示されます

/** html **/
<section id="dragged-drop-zone" >
    <div class="look-like-input textfield" contenteditable></div>
    <br />
    <div class="look-like-input textarea" contenteditable></div>
</section>

。

/** css **/
.look-like-input{
    background-color: white;
    border: 1px solid #CCC;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    padding: 0.25em 0.5em;
    min-height: 1.5em;
}
.look-like-input.textfield{
    appearance: field;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
}
.look-like-input.textarea{
    appearance: field;
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    overflow: auto;
    resize: both;
    min-height: 3.5em;
}
.look-like-input:focus{
    border: 1px solid #69F;
    -moz-box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
    -webkit-box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
    box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
}


#dragged-drop-zone{
    border: 1px solid #666;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    padding: 1em;
}


本当にありがとう！

4

2 に答える 2

2

これは私がこれまでに持っているものであり、機能します

<html>
<head>
    <style>
        #dragged-drop-zone {
            border: 1px solid #666;
            -webkit-border-radius: 1em;
            -moz-border-radius: 1em;
            border-radius: 1em;
            padding: 1em;
        }

        .myinput {
            background-color: white;
            border: 1px solid #CCC;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            padding: 0.25em 0.5em;
            min-height: 1.5em;
        }

        .myinput:focus {
            border: 1px solid #69F;
            -moz-box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
            -webkit-box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
            box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
        }

        .mytextfield {
            appearance: field;
            -moz-appearance: textfield;
            -webkit-appearance: field;
        }

        .mytextarea {
            appearance: field;
            -moz-appearance: textfield-multiline;
            -webkit-appearance: area;
            overflow: auto;
            resize: both;
            min-height: 3.5em;
        }
    </style>
</head>
<body>
    <section id="dragged-drop-zone" >
        <div class="myinput mytextfield" contenteditable></div>
        <br />
        <div class="myinput mytextarea" contenteditable></div>
    </section>
</body>
</html>
于 2013-01-10T19:41:01.950 に答える
2

それはあなたです：

-webkit-appearance:

テキストボックス入力またはテキストエリアのように見せることが目的です

これを追加して、私が何を意味するかを確認してください。

.look-like-input {
background-color: white;
border: 1px solid #CCC;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 0.25em 0.5em;
min-height: 1.5em;
-webkit-appearance: none !important;
}

ここで言及：

Chrome/Webkitの<select>要素から丸みを帯びた角を削除する

外観が重要な場合は、 KevinBrydonの方法を確認してください。

于 2013-01-10T20:15:26.457 に答える