当前位置：文江博客话题详情

实现“时尚”的一个很好的例子大输入文本框？

发布于 2024-09-30 20:07:41 字数 206 浏览 3 评论 0原文

实现“时尚”大型输入文本框的一个很好的示例，例如 google 和 tumblr？

在 tumblr 上，他们如何使用管理让输入从光标在框中的位置向后流动 - 在 URL 的最终输入框中。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦归所梦 2024-10-07 20:07:41

您可以使用 CSS：

input.FancyText {
    background: url(something) no-repeat;
    border: none;
    text-align: right;
}

您可以使用 Firebug 查看 Tumblr 的 CSS。

You can use CSS:

input.FancyText {
    background: url(something) no-repeat;
    border: none;
    text-align: right;
}

You can see Tumblr's CSS using Firebug.

回复收藏 0 原文

梦屿孤独相伴 2024-10-07 20:07:41

是的，只要这样做：

input { padding: 10px; font-size: 26px; }

它会让输入元素“更胖”。

Yes, just do like this:

input { padding: 10px; font-size: 26px; }

and it will make the input elements "fatter".

回复收藏 0 原文

小傻瓜 2024-10-07 20:07:41

input.fat
{
    text-align: right;
    font-size: 28px;
}

input.fat
{
    text-align: right;
    font-size: 28px;
}

回复收藏 0 原文

对风讲故事 2024-10-07 20:07:41

正如 SLaks 所建议的，您可以使用 CSS 来控制输入文本框的外观。例如，您可以使用 firebug 来发现 tumblr 使用的 CSS 如下所示：

background-color:#F9F8E4; /* when in focus */
background:url("/images/input_bg.png") repeat-x scroll left top #F7FCFF;
border:1px solid #97B5D2;
color:#25313C;
font-family:Georgia,Times,"Times New Roman",serif;
font-size:28px; /* This probably makes it "fat" as you want */
width:480px;
font:13px 'Lucida Grande',Helvetica,Arial,sans-serif;
margin:0;
outline:0 none;
padding:7px;

这些是活动样式（分布在多个不同的规则中）。另外，评论是我的。

尝试设置 font-size 属性以使输入区域“胖”
尝试设置 text-align:right 属性以使输入“向右流动”，如 URL 字段中一样。

As SLaks suggested, you can use CSS to control the appearance of the input text boxes. For example, you could use firebug to discover that the CSS tumblr uses looks like this:

background-color:#F9F8E4; /* when in focus */
background:url("/images/input_bg.png") repeat-x scroll left top #F7FCFF;
border:1px solid #97B5D2;
color:#25313C;
font-family:Georgia,Times,"Times New Roman",serif;
font-size:28px; /* This probably makes it "fat" as you want */
width:480px;
font:13px 'Lucida Grande',Helvetica,Arial,sans-serif;
margin:0;
outline:0 none;
padding:7px;

These are the active styles (which are spread across several different rules). Additionally, the comments are mine.

Try setting the font-size property to make the input area "fat"
Try setting the text-align:right property to make the input "flow to the right" as in the URL field.

回复收藏 0 原文

~没有更多了~