Changing size of input in CSS

Question

Is possible to change width of input wihtou using HTML ? i had size="35" and it was all ok on site ( check here(bottom of site)) until i started to write code for mobile. now, size 35 is very wide and i dont know how else can i make it look the same. on mobile version i want to make it in flex-direction: column what am i doing wrong ?

I tried something like this

input [type=text] {
width: 60%;}

but for some reason it only alternate two of my input boxes o_O

thanks

.bcs_za_form {
    width: 100%;
    background-color: #646C8E;
    height: 790px;
}

.textnadform {
    padding-top: 50px;
    text-align: center;
    font-size: 35px;
    color: #ffffff;
    width: 100%;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
}

.zanech {
    font-size: 17px;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
}

.celyform {
    width: 100%;
}

.formular_2 {
    padding-top: 50px;
    display: flex;
    justify-content: center;

}

.formular_4 {
    border: 1px solid #ffffff;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: white;
    background-color: #646C8E;
    padding-top: 25px;
    padding-right: 30px;
    padding-bottom: 25px;
    padding-left: 30px;
    border-radius: 10px;
}

.formular_4::placeholder {
    color: #ffffff;
}

.prvedva {
    margin-bottom: 1%;
    flex-grow: inherit;
    display: flex;
    width: 100%;
}

.druhedva {
    margin-bottom: 3%;
    flex-grow: inherit;
    display: flex;
    width: 100%;
}

.druhy {
    padding: 0px 0px 0px 20px;
}

.stvrty {
    padding: 0px 0px 0px 20px;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

textarea:focus ,
input:focus {
    color: #3E3E55;
}

<div class="bcs_za_form" id="Kontakt">

    <div class="celyform">
        <div class="textnadform">
            <p class="napismi">Kontaktujte Ma</p>

            <p class="zanech">Zanechajte mi odkaz a ja sa vám budem čo najskôr venovať.</p>
        </div>
  
            <div class="formular_2">
                <form class="formular_3" action="kontakt.php" method="post">
                    <div class="prvedva">
                        <input class="formular_4" type="text" name="meno" placeholder="Meno" size="35">
                    <div class="druhy"> 
                        <input class="formular_4" type="text" name="priezvisko" placeholder="Priezvisko" size="35">
                    </div> 
                    </div>
                        <br>
                    <div class="druhedva">
                    
                        <input class="formular_4" type="text" name="telcislo" placeholder="Tel. číslo" size="35">
                    <div class="stvrty">
                        <input class="formular_4" type="text" name="mail" placeholder="Váš E-mail" size="35">
                    </div>
                        <br>
                </div>
                    <div class="">
                        <textarea class="formular_4" name="sprava" placeholder="Správa" cols="85" rows="8"></textarea>
                    </div>
                </form>
            </div>

You can use Bootstrap to make it responsive; getbootstrap.com/docs/4.0/components/forms — barbaart
– barbaart, Commented Nov 5, 2020 at 14:20
@barbaart it would be usefull site, if there was any css added i need that css — Marián Jackovič
– Marián Jackovič, Commented Nov 5, 2020 at 14:36

timber535 · Accepted Answer · 2020-11-05 18:03:59Z

1

There is some strange nesting of the divs in the form which is causing ony 2 fields to be resized.

I noticed your form width is going out of the container on resize. You can wrap your form in a div and set a max-width so it does not overflow the parent container like so:

.form-container{
max-width: 100%;
}

UPDATED CODE:

<html lang="en">

<head>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>form</title>
    <style>
        .bcs_za_form {
            width: 100%;
            background-color: #646C8E;
            height: 790px;
        }
        
        .textnadform {
            padding-top: 50px;
            text-align: center;
            font-size: 35px;
            color: #ffffff;
            width: 100%;
            font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
        }
        
        .zanech {
            font-size: 17px;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 600;
        }
        
        .celyform {
            width: 100%;
        }
        
        .formular_2 {
            padding-top: 50px;
        }
        
        .formular_4 {
            border: 1px solid #ffffff;
            font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: white;
            background-color: #646C8E;
            padding-top: 25px;
            padding-right: 30px;
            padding-bottom: 25px;
            padding-left: 30px;
            border-radius: 10px;
            margin: 10px;
        }
        
        .formular_4::placeholder {
            color: #ffffff;
        }
        
        .formular_3 {
            display: flex;
            flex-direction: column;
        }
        
        .prvedva {
            margin-bottom: 1%;
            flex-grow: inherit;
            display: flex;
            width: 100%;
        }
        
        .druhedva {
            margin-bottom: 3%;
            flex-grow: inherit;
            display: flex;
            width: 100%;
        }
        
        .druhy {
            padding: 0px 0px 0px 20px;
        }
        
        .stvrty {
            padding: 0px 0px 0px 20px;
        }
        
        input:focus,
        select:focus,
        textarea:focus,
        button:focus {
            outline: none;
        }
        
        textarea:focus,
        input:focus {
            color: #3E3E55;
        }
        
        .section {
            display: flex;
            width: 100%;
        }
        
        input.formular_4 {
            -webkit-flex: 1 2 auto;
            -moz-flex: 1 2 auto;
            -ms-flex: 1 2 auto;
            -o-flex: 1 2 auto;
            flex: 1 2 auto;
            margin: 10px;
        }
        
        .form-container {
            max-width: 100%;
            width: 100%;
        }
        
        @media only screen and (max-width: 520px) {
            .section {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <div class="bcs_za_form" id="Kontakt">
        <div class="celyform">
            <div class="textnadform">
                <p class="napismi">Kontaktujte Ma</p>
                <p class="zanech">Zanechajte mi odkaz a ja sa vám budem čo najskôr venovať.</p>
            </div>
            <div class="form-container">
                <div class="formular_2">
                    <form class="formular_3" action="kontakt.php" method="post">
                        <div class="section">
                            <input class="formular_4" type="text" name="meno" placeholder="Meno">
                            <input class="formular_4" type="text" name="priezvisko" placeholder="Priezvisko"> </div>
                        <div class="section">
                            <input class="formular_4" type="text" name="telcislo" placeholder="Tel. číslo">
                            <input class="formular_4" type="text" name="mail" placeholder="Váš E-mail"> </div>
                        <textarea class="formular_4" name="sprava" placeholder="Správa" cols="85" rows="8"></textarea>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

I have omitted the size="35" attribute which you can add if you like, and used flex to size the fields. Another way is to set the inputs to eg. 48% but then you have to calculate the margins manually.

You don't need bootstrap but you can use the library if you have need for it, in terms of consistency it can help you to make evertything look consistent.

edited Nov 5, 2020 at 18:03

answered Nov 5, 2020 at 15:56

timber535

4351 gold badge4 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Marián Jackovič Over a year ago

Wow, its working, but what do i need to change to make width of input boxes smaller when it comes to responsivility? When i crop down resolution under 500, width of input boxes are too big and i would like to have them 100% of the screen

timber535 Over a year ago

@MariánJackovič Could you explain what do you mean by too big? Do you want them 100% ie. full-width ?

timber535 Over a year ago

I have updated the code to include full-width on small screen (max-width:520px)..

Marián Jackovič Over a year ago

imgup.cz/image/k1dG nope, nothing changed.

timber535 Over a year ago

@MariánJackovič can you copy again and refresh browser

|

Dima Malko · Accepted Answer · 2020-11-05 14:16:15Z

0

Have you tryed to use something like this?

   @media only screen and (max-width: 600px) {
  .formular_4 {
    size: 20;
  }
}

to max width you write px size of screen that you need, it means in this one that every screen smaller than 600 px, will take the dependency.

answered Nov 5, 2020 at 14:16

Dima Malko

3334 silver badges25 bronze badges

4 Comments

Marián Jackovič Over a year ago

nope, not working, nothing change, i think that i need to change way that size of box is determined, i cart override that size in hmtl

Dima Malko Over a year ago

Then try to delete size from html and specify its height /width in css, maybe it just takes size from HTML and ignores css

Marián Jackovič Over a year ago

I found that size in css is not supported by any browser, so thats not the way i guess developer.mozilla.org/en-US/docs/Web/CSS/@page/size

Dima Malko Over a year ago

Then use height and widht so specify how big inputs are. Actully i have never used size, now i know why its not popular :D specify all sizes atc in CSS, i see no reason to use it in html

barbaart · Accepted Answer · 2020-11-05 14:52:41Z

0

i added some bootstrap to your form to make it more responsive. hope this will work, see the snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">    

</head>
<body>
<div class="container">
  <form class="formular_3" action="kontakt.php" method="post">
    <div class="prvedva form-group">
        <input class="formular_4 form-control" type="text" name="meno" placeholder="Meno" size="35">
    </div>

    <div class="druhy form-group"> 
        <input class="formular_4 form-control" type="text" name="priezvisko" placeholder="Priezvisko" size="35">
    </div> 

    <div class="druhedva form-group">
        <input class="formular_4 form-control" type="text" name="telcislo" placeholder="Tel. číslo" size="35">
    </div>
    <div class="stvrty form-group">
        <input class="formular_4 form-control" type="text" name="mail" placeholder="Váš E-mail" size="35">
    </div>

    <div class="form-group">
        <textarea class="formular_4 form-control" name="sprava" placeholder="Správa" cols="85" rows="8"></textarea>
    </div>
  </form>
</div>

</body>
</html

for more info see the docs

answered Nov 5, 2020 at 14:52

barbaart

8656 silver badges15 bronze badges

7 Comments

Marián Jackovič Over a year ago

It Looks like its working but i dont understand how does it work :P how can i use it only for media query ? like @media screen and (max-width:500px) ?

Marián Jackovič Over a year ago

and how can i change it ? i dont get it at all

barbaart Over a year ago

this bootstrap form makes everything resizable/responsive, so you dont need media querys for it, which is awesome because you dont need to write many lines of css now. I would recommend you to check out some bootstrap tutorials :)

Marián Jackovič Over a year ago

but when i add this code to my site, i cant customize my form and one whole segments is broken :P

barbaart Over a year ago

You can override the bootstrap if you add your own custom.css file under the bootstrap link in the <head>

|

Collectives™ on Stack Overflow

Changing size of input in CSS

3 Answers 3

6 Comments

4 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related