實現「時尚」大型輸入文本框的一個很好的例子？

一個很好的例子，實現像google和tumblr那樣的'時髦'大輸入文本框？實現「時尚」大型輸入文本框的一個很好的例子？

在tumblr上，他們如何使用管理來讓輸入從光標在框中的位置向後流動 - 在URL的最終輸入框中。

2010-11-03 Ric

您可以使用CSS：

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

可以使用Firebug的tumblr的CSS看看。

來源

2010-11-03 00:23:32 SLaks

但你可以使搜索框'胖'像tumblrs？ – Ric 2010-11-03 00:26:18

@Ric科爾斯嘗試'填充'。 – alex 2010-11-03 00:31:02

需要很厚 - 我想要一個帶圍長的文本框 – Ric 2010-11-03 00:31:38

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

來源

2010-11-03 00:28:11 Kugel

拼寫錯誤，沒有分號 - 請修復或我相信您會被降低投票。 – alex 2010-11-03 00:30:41

語法納粹！不需要苛刻。這個想法很重要。 – Kugel 2010-11-03 10:59:58

除語法和文本外，它是語法和代碼。 – Manur 2010-11-03 11:16:24

是的，就這樣做：

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

，它將使輸入元素「胖」。

來源

2010-11-03 00:32:37 netrox

由於SLaks建議，您可以使用CSS來控制輸入文本框的外觀。例如，你可以使用Firebug發現，CSS tumblr使用看起來像這樣：

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;

這些都是積極的風格（這是在幾個不同的規則傳播）。另外，評論是我的。

嘗試設置字體大小屬性以使輸入區域變爲「胖」嘗試設置text-align：right屬性以使輸入「向右流動」，如在URL字段中一樣。

來源

2010-11-03 00:36:06

實現「時尚」大型輸入文本框的一個很好的例子？

回答

相關問題