set height,width of input textbox

Posted on 2011-05-07
Last Modified: 2012-05-11
set height,width of input textbox not textarea
Question by:rgb192
    LVL 13

    Expert Comment

    Do you have any markup to give us? Maybe some parsed HTML? A lot of times an input textbox will have a class, which will affect the code that is given.
    LVL 9

    Accepted Solution

    input { height:100px;width:500px;background-color:red; }
    <input type='text'>

    Open in new window

    input { height:[x]px/em; width:[x]px/em; }

    That will set for all inputs (password, text, etc...) created by <input type='...'>. You can do the same with textarea by:

    textarea { height:[x]px/em; width:[x]px/em; }
    LVL 18

    Assisted Solution

    Or you could give the input boxes that you want styling a class:

    <input type="text" class="input" id="" value="" name="" />

    Open in new window

    And then style them as you need:

    <input type="text" class="input" id="" value="" name="" />

    Open in new window

    It's actually probably a better idea to set a font size and some padding rather than a height.
    .input { height:20px;width:600px; }

    Open in new window

    LVL 18

    Expert Comment

    Sorry about the repeated <input /> HTML it got embedded incorrectly!

    Author Closing Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: Create Mobile App Prototypes with Adobe XD

    This is a project-based course: we go through all the steps of creating a prototype from start to finish, using all the tools and features currently available in Adobe XD. You can complete the course in less than a day, plus all project files and fonts are included.

    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now