Question

我见过许多具有多种形状文本框的网站（例如，有人在绘画中绘制它并使其成为HTML文本框）。这些文本框是如何制作的？我发现使用某种css但是如何得到它......

Answer 1

或者，您可以将图像用作文本框背景，这可以使事情看起来很棒：

<style type="text/css">
 input{
  width:220px;
  height:50px;
  display:block;
  background:url(images/input.png);
  border: none;
 }
</style>

Answer 2

一种方法是利用CSS3，如下所示：

<html>
<head>
<style type="text/css">
.round{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
padding:10px;
}
</style>
</head>
<body>
<textarea rows="1" cols="10" class="round">Blah blab </textarea> 
</body>
</html>

以同样的方式，您可以添加背景图像，更多样式等，如下所示。希望能回答你的问题！

<html>
<head>
<style type="text/css">
.round{
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
padding:10px;
background:yellow;
border: 2px dotted red;
}
</style>
</head>
<body>
<textarea rows="1" cols="10" class="round">Blah blab </textarea> 
</body>
</html>

如何制作自定义文本框？

2 个答案: