TOPIC:
我正在做几个div来接受一些拖放值并将它们设计成看起来像输入
一切都在Firefox中呈现出色
但是,在Chrome中,边框和框阴影无法正确渲染。 (我在Chm v.24,顺便说一句)
目标:
最重要的是,我只是想让它发挥作用
但是......我很高兴得到关于如何更好地任何的任何建议:)
注意:
这适用于局内应用程序。 FireFox& Chrome是这里唯一正式支持的两种浏览器,因此,虽然所有浏览器的兼容性肯定会很好,但我只需要对这两种浏览器进行编码。
代码: Also visible here on 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;
}
感谢-A-一堆!
答案 0 :(得分: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>
答案 1 :(得分:2)
这是你的:
-webkit-appearance:
其目的是让它看起来像文本框输入或textarea
添加此内容并查看我的意思:
.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;
}
这里提到:
Removing rounded corners from a <select> element in Chrome/Webkit
如果上诉是至关重要的,请检查 Kevin Brydon 方法。