SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Style of input text element

    Hello guys,

    I'm trying to change input text element.

    I'm using this in CSS file:
    .textsmall {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8px;
    color: #000000;
    }
    And this in HTML:
    <input type="text" name="link" cols="20" class="textsmall" />
    But it doesn't work. Text inside the input text box still has the same size.

    Another question is how can I change input text element's height? height="5px" doesn't work for me.

    And the last question is how can I insert HTML code as the value of input text? value="<a href="">" doesn't work and value='<a href="">' doesn't work also.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which browser are you using? Some browsers allow you to set a minimum font size, which they will not go under.

    8 pixels is far too small for most people to read. Most fonts will be completely illegible at that size, especially if the field contains lowercase letters.

    Your HTML is invalid. There is no cols for input elements (only for textarea). If you want to specify the width, use the width CSS property (e.g., width:20em).

    If you want to display markup as the content of a field, you must make sure to escape the angle brackets (at least the left angle bracket).
    Code HTML4Strict:
    <input type="text" ... value='&lt;a href= ""&gt;'>
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Which browser are you using? Some browsers allow you to set a minimum font size, which they will not go under.

    8 pixels is far too small for most people to read. Most fonts will be completely illegible at that size, especially if the field contains lowercase letters.
    Thanks for quick reply.

    I use Firefox for Mac OS. It displays 8px as 8px in all pages on my site. It doesn't work only with this input element.

    I use 8px for link code which user will simpy copy paste and he will not read it. I use 12px for normal text.

    Your HTML is invalid. There is no cols for input elements (only for textarea). If you want to specify the width, use the width CSS property (e.g., width:20em).
    Thanks. It works. Even height works now.

    If you want to display markup as the content of a field, you must make sure to escape the angle brackets (at least the left angle bracket).
    Code HTML4Strict:
    <input type="text" ... value='&lt;a href= ""&gt;'>
    It works when I put it in simple HTML and display in Firefox.

    But it doesn't work when I put the same code into my PHP page like this:

    PHP Code:
    <?
    ....
    some php
    ....
    ?>

    <input .... value="&lt;a href=&quot;&quot;&gt;aaaaaaa&lt;/a&gt;" />

    <?
    ....
    some php
    ....
    ?>

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by al9 View Post
    It works when I put it in simple HTML and display in Firefox.

    But it doesn't work when I put the same code into my PHP page like this:
    That should work. What does the generated HTML look like?
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    That should work. What does the generated HTML look like?
    I made it work. Everything works except 8px script. The output HTML is:

    <input name="link1" class="textsmall" style="border: 1px solid green; margin-bottom: -4px; width: 5em; height: 12px;" value="&lt;a href=&quot;&quot;&gt;aaaaaaa&lt;/a&gt;" type="text">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •