Tanoru Posted March 2, 2010 Share Posted March 2, 2010 Hi I was just wondering if anyone knows the default font for the Input tag. Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/ Share on other sites More sharing options...
0 Cupcakes Posted March 2, 2010 Share Posted March 2, 2010 It's based on OS/browser. Most of the time it's Courier New or some other variation. Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/#findComment-592298752 Share on other sites More sharing options...
0 Tanoru Posted March 2, 2010 Author Share Posted March 2, 2010 Ahh I thought it might be but I wasn't too sure. @Cupcakes do you know how to style it? I have this : input #search { font-family:whatever; } It doesn't seem to work for me =/ or am I being silly =P Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/#findComment-592299646 Share on other sites More sharing options...
0 The_Decryptor Veteran Posted March 2, 2010 Veteran Share Posted March 2, 2010 input #search is trying to style an element with the id "search" which is a child of an <input> tag. use input#search instead (or input.search if you have more than one per page, since ID's are unique) Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/#findComment-592299650 Share on other sites More sharing options...
0 Tanoru Posted March 2, 2010 Author Share Posted March 2, 2010 @Decryptor Sorry I wasn't clearer before, I knew that. I have a span element inside my div ID'd search =) Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/#findComment-592299800 Share on other sites More sharing options...
0 +Majesticmerc MVC Posted March 2, 2010 MVC Share Posted March 2, 2010 On 02/03/2010 at 10:23, Tanoru said: @Decryptor Sorry I wasn't clearer before, I knew that. I have a span element inside my div ID'd search =) In that case, your selector is the wrong way round. What you should have is: div#search input { font-family:whatever; } Which styles all inputs that are children of the div with the ID "search". Parent elements are always on the left :) Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/#findComment-592299814 Share on other sites More sharing options...
0 Tanoru Posted March 2, 2010 Author Share Posted March 2, 2010 Ok after going back and looking at my code, what I ACTUALLY have is : #search input { background:none; border:none; color:#ccc; height:26px; margin-top:-1px; padding-left:4px; text-shadow:0px 2px 2px #000; width:170px; } when I add font-family to that it has no effect. =/ Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/#findComment-592300078 Share on other sites More sharing options...
0 The_Decryptor Veteran Posted March 2, 2010 Veteran Share Posted March 2, 2010 Could you post some full example code, since I can set the font on the input element easily here (Also, grey text with a black blurred shadow is very hard to read) Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/#findComment-592300130 Share on other sites More sharing options...
0 Tanoru Posted March 2, 2010 Author Share Posted March 2, 2010 Probably what I should have just done at the start to save this confusion. HTML <span id="search"> <input name="search" type="text" value="Search this website..." onclick='this.value = "";' onblur="if (this.value == '') {this.value = 'Search this website...';}" onfocus="if (this.value == 'Search this website...') {this.value = '';}" /> </span> CSS #search input { background:none; border:none; color:#ccc; height:26px; margin-top:-1px; padding-left:4px; text-shadow:0px 2px 2px #000; width:170px; } Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/#findComment-592300160 Share on other sites More sharing options...
0 The_Decryptor Veteran Posted March 2, 2010 Veteran Share Posted March 2, 2010 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html lang="en"> <head> <title>Test</title> <style type="text/css"> #search input { background:none; border:none; color:#ccc; height:26px; margin-top:-1px; padding-left:4px; text-shadow:0px 2px 2px #000; width:170px; font-family: monospace; } </style> </head> <body> <p> <span id="search"> <input name="search" type="text" value="Search this website..." onclick='this.value = "";' onblur="if (this.value == '') {this.value = 'Search this website...';}" onfocus="if (this.value == 'Search this website...') {this.value = '';}" /> </span> </p> </body> </html> That works fine for me. Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/#findComment-592300190 Share on other sites More sharing options...
0 kavisiegel Posted March 4, 2010 Share Posted March 4, 2010 If putting a value in font-family isn't working... is the font name spelled correctly? is the font a default font, currently on your PC? If the font has a space in its name, does it have quotes around it? Is it the child element to another node that has a font assigned? Have you tried adding !important? Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/#findComment-592310408 Share on other sites More sharing options...
0 Elliott Posted March 4, 2010 Share Posted March 4, 2010 font-family should work just fine in what you have. What font are you trying to use? Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/#findComment-592310428 Share on other sites More sharing options...
0 Tanoru Posted March 4, 2010 Author Share Posted March 4, 2010 Sorry i never updated this post, but I got it working : ) Link to comment https://www.neowin.net/forum/topic/879772-default-input-font/#findComment-592311230 Share on other sites More sharing options...
Question
Tanoru
Hi I was just wondering if anyone knows the default font for the Input tag.
Link to comment
https://www.neowin.net/forum/topic/879772-default-input-font/Share on other sites
12 answers to this question
Recommended Posts