Html 圆角文本区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3145064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
rounded corner textarea
提问by fawad
This is very general question.
这是一个非常普遍的问题。
I want to create a textarea with rounded corner with CSS. Please help me out.
我想用 CSS 创建一个带圆角的 textarea。请帮帮我。
回答by okalex
Depending on what browser support you need, you could use CSS3's border-radiusproperty.
根据您需要的浏览器支持，您可以使用 CSS3 的border-radius属性。
textarea {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
回答by Aaron Yodaiken
Don't just use somebody else's code: understand and write it yourself. Sliding doors is what you're after: http://www.alistapart.com/articles/slidingdoors/
不要只使用别人的代码：自己理解和编写。滑动门是您所追求的：http: //www.alistapart.com/articles/slidingdoors/
回答by User123342234
Basically there is no way to do this in CSS2 other than a cheap hack.
除了廉价的 hack 之外，基本上没有办法在 CSS2 中做到这一点。
You can fudge it by setting the top and bottom borders of the textarea to have the same color as the background. You then make up a top and bottom image with rounded corners.
您可以通过将 textarea 的顶部和底部边框设置为与背景颜色相同来捏造它。然后用圆角制作顶部和底部图像。
This is some pretty quick html/css. You will have to tweak it further for different browsers (eg. the way chrome and firefox display textareas is a fair bit different).
这是一些非常快速的 html/css。您将不得不针对不同的浏览器进一步调整它（例如，chrome 和 firefox 显示文本区域的方式略有不同）。
<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>
updateA quick test page for you http://www.killyourstereo.com/temp/textbox.html
为您更新一个快速测试页面http://www.killyourstereo.com/temp/textbox.html
回答by Gil
You can use Jquery "jquery.com" and plug-in "DD_roundies" to apply rounded corners to dom elements http://dillerdesign.com/experiment/DD_roundies/
您可以使用 Jquery“jquery.com”和插件“DD_roundies”将圆角应用于 dom 元素http://dillerdesign.com/experiment/DD_roundies/
回答by Rocco
回答by T.T.T.
or
或者
<div class="loginboxdiv">
<input class="loginbox" name="username" type="text" />
</div>
CSS-
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;
}
