圆角文本区域答案

【问题标题】：rounded corner textarea圆角文本区域
【发布时间】：2011-03-09 20:57:14
【问题描述】：

这是一个非常笼统的问题。

我想用 CSS 创建一个带圆角的文本区域。请帮帮我。

【问题讨论】：

我认为你应该阅读这个问题。 stackoverflow.com/questions/7089/…

标签： html css

【解决方案1】：

http://www.roundedcornr.com/

或

<div class="loginboxdiv">
  <input class="loginbox" name="username" type="text" />
</div>

CSS-

   .loginboxdiv
{
 margin:0;
 height:21px;
 width:146px;
 background:url(login_bg.gif) no-repeat bottom;
}
.loginbox
{
 background:none;
 border:none;
 width:134px;
 height:15px;
 margin:0;
 padding: 2px 7px 0px 7px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
}

【讨论】：

我已经使用了文本框的确切代码。你认为它也适用于 textarea 吗？就像在右侧滚动
CSS 中的这些规范只能用于单行。
这个有一个带圆角的多行文本框：bathew.com/playhouse/rounded-corner-form-elements

【解决方案2】：

不要只使用别人的代码：理解并自己编写。推拉门就是你所追求的：http://www.alistapart.com/articles/slidingdoors/

【讨论】：

通常我会同意，但现在几乎没有理由为文本区域使用滑动门。它通常只是设计的一小部分，因此使用 CSS3 进行渐进增强是最干净、最简单的方法。

【解决方案3】：

根据您需要的浏览器支持，您可以使用 CSS3 的 border-radius 属性。

textarea {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

【讨论】：

+1 给 Alex....清洁解决方案。请注意，它在 IE 中不起作用......再说一次，IE 用户不应该得到像圆角这样酷的东西
是的，它不会在现有版本的 IE 中工作，但它会在即将发布的 IE9 中工作。
确保先定义边框。
目前还不是一个理想的解决方案。 IE6-8 仍然拥有近 33% 的市场份额，这是您正在疏远的大量人群。 (w3schools.com/browsers/browsers_stats.asp)。尽管这种情况正在下降，并且随着 IE9 的加入，该解决方案将变得更加可行。
我认为说你疏远了这些用户有点牵强。他们得到的页面看起来并不像 Webkit 或 Firefox 用户得到的那样相当。 IMO，渐进增强并没有错，而且通常值得为它省下的麻烦找到适用于所有浏览器的方法。

【解决方案4】：

除了廉价的 hack 之外，在 CSS2 中基本上没有办法做到这一点。

您可以通过将 textarea 的顶部和底部边框设置为与背景相同的颜色来伪造它。然后用圆角组成顶部和底部图像。

这是一些非常快速的 html/css。您将不得不针对不同的浏览器进一步调整它（例如，chrome 和 firefox 显示 textareas 的方式有点不同）。

<style>
.container {
    width: 400px;
}
textarea {
    border: none;
    border-collapse:collapse;
    border-right: #000 1px solid;
    border-left: #000 1px solid;
    resize: none;
    margin: 0;
    padding: 0;
    width: 400px;
}
</style>


<div class="container">
    <img src="top_cap.jpg" />
    <div><textarea rows="10"></textarea></div>
    <img src="bottom_cap.jpg" />
</div>

更新给你的快速测试页面http://www.killyourstereo.com/temp/textbox.html

【讨论】：

非常感谢。这就是我一直在寻找的。span>
没问题。虽然不是一个优雅的解决方案，但它是确保它在所有浏览器中看起来都一样的最安全的选择。（请注意，我的描述和 css 之间存在差异。我说在边框上设置与 bg 相同的颜色，但是我只是从顶部和底部完全删除了边框。）。您还可以进一步调整它以允许不同的宽度，而无需为每种尺寸使用不同的顶部和底部图形（例如，非固定宽度）。（接受？）

【解决方案5】：

您可以使用 Jquery "jquery.com" 和插件 "DD_roundies" 为 dom 元素应用圆角 http://dillerdesign.com/experiment/DD_roundies/

【讨论】：

【解决方案6】：

考虑使用Formwin。适用于 IE8 及更高版本的许多表单元素。

【讨论】：