закругленный угол текстовой области

Question

Это очень общий вопрос.

Я хочу создать текстовую область с закругленным углом с помощью CSS. Пожалуйста, помогите мне.

Answer 1

В зависимости от того, какая поддержка браузера вам нужна, вы можете использовать свойство CSS3 border-radius.

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

Answer 2

Не просто используйте чужой код: поймите и напишите его сами. Раздвижные двери - это то, что вам нужно: http://www.alistapart.com/articles/slidingdoors/

Answer 3

Рассмотрите возможность использования Formwin .Работает на многих элементах формы для IE8 и выше.

Answer 4

Вы можете использовать Jquery "jquery.com" и плагин "DD_roundies", чтобы применять закругленные углы к элементам dom http://dillerdesign.com/experiment/DD_roundies/

Answer 5

По сути, в CSS2 нет другого способа сделать это, кроме дешевого хака.

Вы можете пометить его, установив верхнюю и нижнюю границы текстовой области таким же цветом, что и фон. Затем вы создаете верхнее и нижнее изображение со скругленными углами.

Это довольно быстрый 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>

обновление Быстрая тестовая страница для вас http://www.killyourstereo.com/temp/textbox.html

Answer 6

Попробуйте эти ссылки:

http://roshanbh.com.np/2008/04/how-to-make-rounded-corner-textbox.html

http://www.knowledgesutra.com/forums/topic/25747-rounded-edges-for-textarea-with-css/

Answer 7

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;
}