CODEWITHSUNDEEP
htmlcssbootstrap-4
Anjali
Anjali

Reputation: 2698

decreasing the height of the text box

I am trying to decrease the height of the text box .style sheet does not seem to decrease the height of the text box. below is my code and style sheet.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.textmargin{
    margin-left: 50px;
}

.new5 {
    border: 5px solid green;
    border-radius: 2px;
}

.textBoxwidthlarge{

    width:40%
}

.textBoxwidthMedium {
    width: 20%
}
.textBoxwidthSmall {
    width: 40%
}

input[type="text"] {
    padding: 12px 10px;
    line-height: 2px;
    border: 2px solid black;
}
</style>
    <div class="col-md-12"><label for="fname" class="textmargin">First Name</label><br />
        <input type="text" runat="server"  class="input-field textmargin textBoxwidthlarge" id="name1" name="t1" /> </div>

I want the height like so:

enter image description here

any help will be appreciated. I have three text boxes inside a . I am only showing one above.

Upvotes: 0

Views: 61

Answers (3)

Rohan Rao
Rohan Rao

Reputation: 2603

Remove all the unnecessary styles from your code and just keep one class to set its width.

.textBoxwidthlarge {
  width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="col-md-12"><label for="fname" class="textmargin">First Name</label><br />
  <input type="text" runat="server" class="input-field textmargin textBoxwidthlarge" id="name1" name="t1" /> </div>

Upvotes: 1

Ender
Ender

Reputation: 71

this way you can customize as you wish

  <div class="col-md-4"><label for="fname" class="textmargin">First Name</label><br />
            <input type="text" runat="server"  class="textmargin textBoxwidthlarge txtboxhg" id="name1" name="t1" /> </div>
            
 <style>
input[type="text"]{ padding: 12px 10px; line-height: 12px; width:100%}
</style>

Upvotes: 2

Dr Yao Strange
Dr Yao Strange

Reputation: 11

To reduce the height of the text box and add a border, add

height: 1px;
border: 2px solid red;

to the .txtboxhg class

You can decide on your own color and border size.

Upvotes: 1

Related Questions