Tips for customizing the style of a TextBox

In my website, I utilize bootstrap along with custom CSS styles as shown below:

.ff { // id of the form
    font: 15px/1.6em Lato, serif;
    max-width: 280px;
    margin: 0 auto;
    margin-top: 20px;
    color: #767a7f;
}
.ff div {
        position: relative;
    }
.ff span.glyphicon {
        color: #adadad;
    }
    .ff input,
    .ff button {
        font-size: 16px;
    }
    .ff input,
    .ff .input-group-addon {
        border: #363b41;
        background: white;
        color: #767a7f;
        border-bottom: 1px solid #292c34;
        border-top: 1px solid #292c34;
        border-left: 1px solid #292c34;
        border-right: 1px solid #292c34;

    }

    .ex {
    }
    .ff .input-group-addon {
        background: #363b41;
        font-size: 20px;
        color: #606468;
    }

    .ff > section {
        text-align: center;
        margin: 15px 0;
    }
        .ff > section span {
            color: #767a7f;
        }


    input[type="submit"] {
        background: #2A425A;
        border: none;
        text-shadow: 1px 1px 1px #2A425A;
        font-size: 20px;
        margin-top: 10px;
        border-radius: 2px;
    }
    input[type="submit"]:hover {
        background: #B19B72;
    }
    .ff input[type=text]:focus,
    .ff input[type=password]:focus {
        background: #e1e9f1;
        border: none;
        box-shadow: none;
    }

.form-group {
    margin-top: 10px;
    margin-bottom: 10px;

}
    .form-group input,
    .form-group .input-group-addon {
        border-radius: 2px;
    }

    .field-wrap {
  position: relative;
  margin-bottom: 40px;
}

.head {
    margin-top:1%;
    margin-left: 45%;
}

.main{
    position:relative;
}   
          #wrapper {
     margin-top: 120px;
     margin-bottom: 120px;

        }

How can I separate the two text fields and make them inline with space between them? Also, I would like to increase the width of the textbox.

HTML

 <div id="wrapper">

         <!-- Page Content -->
    <div class="container" >

        <!-- Page Heading/Breadcrumbs -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">User Registration

                </h1>
                <ol class="breadcrumb">
                    <li><a href="HomePageAdmin.aspx">Home</a>
                    </li>
                    <li class="active">Register</li>
                </ol>
            </div>
        </div>
        <!-- /.row -->



        <!-----start-main---->
             <div class="main">


        <form id="form1" class="ff" runat="server">


   <div class="field-wrap">
      <div class="form-group input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-tags"></span></span>
        <input type="text" name="firstname"  class="form-control input-lg" placeholder="First Name *"  />

        <span class="input-group-addon" ><span class="glyphicon glyphicon-tags"></span></span>
        <input type="text" name="lastname" class="form-control input-lg" placeholder="Last Name *" />
      </div>
    </div>

           <asp:Button ID="btn_LogIn" runat="server" Text="LogIn" class="btn btn-lg btn-block btn-success" />

        </form>

                </div>
        <!-----//end-main---->

    </div>
  </div>

The output will appear similar to this image:

enter image description here

cssasp.nettwitter-bootstrap-3stylesheet

Answer №1

If you strive to achieve a similar design, consider the following CSS:

.ff { // id of the form
    font: 15px/1.6em Lato, serif;
  max-width: 380px;  
    margin: 0 auto;
    margin-top: 20px;
    color: #767a7f;
}
.ff div {
        position: relative;
    }
.ff span.glyphicon {
        color: #adadad;
    }
    .ff input,
    .ff button {
        font-size: 16px;
    }
    .ff input,
    .ff .input-group-addon {
        border: #363b41;
        background: white;
        color: #767a7f;
        border-bottom: 1px solid #292c34;
        border-top: 1px solid #292c34;
        border-left: 1px solid #292c34;
        border-right: 1px solid #292c34;

    }

    .ex {
    }
    .ff .input-group-addon {
        background: #363b41;
        font-size: 20px;
        color: #606468;
    }

    .ff > section {
        text-align: center;
        margin: 15px 0;
    }
        .ff > section span {
            color: #767a7f;
        }


    input[type="submit"] {
        background: #2A425A;
        border: none;
        text-shadow: 1px 1px 1px #2A425A;
        font-size: 20px;
        margin-top: 10px;
        border-radius: 2px;
    }
    input[type="submit"]:hover {
        background: #B19B72;
    }
    .ff input[type=text]:focus,
    .ff input[type=password]:focus {
        background: #e1e9f1;
        border: none;
        box-shadow: none;
    }

.form-group {
    margin-top: 10px;
    margin-bottom: 10px;

}
    .form-group input,
    .form-group .input-group-addon {
        border-radius: 2px;
    }

    .field-wrap {
  position: relative;
  margin-bottom: 40px;
}

.head {
    margin-top:1%;
    margin-left: 45%;
}

.main{
    position:relative;
}   
          #wrapper {
     margin-top: 120px;
     margin-bottom: 120px;

        }
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <div id="wrapper">

         <!-- Page Content -->
    <div class="container" >

        <!-- Page Heading/Breadcrumbs -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">User Registration

                </h1>
                <ol class="breadcrumb">
                    <li><a href="HomePageAdmin.aspx">Home</a>
                    </li>
                    <li class="active">Register</li>
                </ol>
            </div>
        </div>
        <!-- /.row -->



        <!-----start-main---->
             <div class="main">


        <form id="form1" class="ff" runat="server">


   <div class="field-wrap">
      <div class="form-group">
        <div class="row">
  <div class="col-sm-6">
    <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-tags"></span></span>
        <input type="text" name="firstname"  class="form-control input-lg" placeholder="First Name *"  />
</div>
   </div>
  <div class="col-sm-6">
    <div class="input-group">
        <span class="input-group-addon" ><span class="glyphicon glyphicon-tags"></span></span>
        <input type="text" name="lastname" class="form-control input-lg" placeholder="Last Name *" />
      </div>
    </div>
</div>
  
         
           <asp:Button ID="btn_LogIn" runat="server" Text="LogIn" class="btn btn-lg btn-block btn-success" />

        </form>

                </div>
        <!-----//end-main---->

    </div>
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Convert Table Data into Tree Structure using C#

I have a data structure that I would like to convert into a tree. While I have managed to accomplish this using recursion, I am wondering if there is a more efficient or better approach? public class Structure { public int Id {get;set;} public int ...

c#asp.netlinqlambda

Is there a way to access just the concealed text within an element?

Is there a way to create a JavaScript function that can specifically extract hidden text from an element? Are there any existing libraries with this capability, and if so, how efficient are they? In order for an element to be considered visible ac ...

javascriptcsshtmlseleniumwebdriver

The multi-line declaration prettier indicates that a newline is expected after the colon

When using Prettier to format code in a scss file, it is formatting this specific part: @font-face { font-family: 'Encode Sans Condensed'; src: url('/pf/resources/fonts/EncodeSansCondensed/EncodeSansCondensed-Thin.ttf') format('tr ...

csssassprettier

Determining the Width of an Image Following the Application of a CSS Class Using Javascript

I have a custom script that is able to determine whether an image is in portrait or landscape orientation. Currently, the image is identified as being in landscape mode. My goal here is to crop and center the image using absolute positioning, specifying a ...

javascriptjqueryhtmlcssimage

How to reach the Twitter share iframe with JavaScript/HTML

There seems to be an issue with the Twitter share button not displaying at its full width on certain pages. Upon investigation, I discovered that the iframe containing it is only set to a width of 24px, when it should actually be set to the correct width. ...

javascripthtmlcsstwitter

Arranging nested columns in a different order for smaller devices with Bootstrap 4

I am currently in the process of developing an e-commerce section, which includes an aside containing filters and a "main" section that should have 6 items displayed as individual cards. The challenge arises when viewing this on mobile screens, where the a ...

htmlcssbootstrap-4

Trouble with Unveiling the Secondary Accordion

I am having issues adding a second accordion next to the existing one. Even though the code is working fine in the tryit editor v3.6 online, it doesn't seem to display correctly for me. I have made sure that I am using the latest versions of all scrip ...

htmlcssbootstrap-4

Transformation of CSS classes in React with Webpack

Have you ever noticed that when you inspect the Airbnb website, the classnames appear to be morphed into single alphanumeric names? What is the name of this technique and is it applied at the code level or build level? https://i.sstatic.net/qSiaj.jpg ...

javascripthtmlcssreactjswebpack

Utilizing Javascript to implement a tooltip feature for dynamically inserted text

I recently incorporated a brief jQuery tooltip plugin into my site. It consists of approximately ten lines of code and works smoothly, as demonstrated in this demo. However, I encountered an issue when attempting to add new text that should also trigger t ...

javascriptjqueryhtmlcsstooltip

I am trying to figure out how to style each box individually, but I'm running into some confusion. There are three different classes to choose from, with the child class

Struggling to style the ten boxes individually? Renaming each class of the box child didn't work as expected? Wondering how to select and style each box with a unique background color? Also facing issues with displaying the logo image on the navigatio ...

htmlcss

Exploring CSS3 for Creating Stylish Navigation Bars

Currently, I am attempting to design a Navigation bar that resembles the style shown in this image, complete with a drop-down menu feature. Here is how I have structured my menu: <nav> <ul> <li> <a href="/i ...

htmlcss

AngularJS combined with jVectorMap allows for the seamless rendering of small interactive

I am facing a similar issue to one discussed here, but with some minor differences. Initially, my map loaded without any problem on the site. However, after adding Angularjs to the site, I noticed a 'small' map issue. It seems like a simple code ...

javascriptjquerycssangularjsjvectormap

Tips for maintaining a consistent height for elements in HTML

As the content of td increases, the height of th also increases. How can we ensure a fixed height for th. This is the HTML code: <table id="depts"> <tr> <th>Topic Title</th> <th><a href="create.php?id= ...

javascriptjqueryhtmlcss

How can autocomplete show data that differs from what's entered and fill in more than one field?

Currently in the process of using asp.NET MVC, I am exploring the JQuery autocomplete plugin to achieve my desired task. However, I am in need of some additional functionality that I believe the plugin does not offer. On a specific page, I have two text f ...

jqueryasp.netajaxasp.net-mvcautocomplete

Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

While it's commonly advised to use feature detection over browser detection in JavaScript, sometimes specific scenarios call for the latter. An example of this can be seen with jQuery 1.9's removal of $.browser. Despite the general recommendatio ...

javascriptcssfeature-detection

What is the best way to position an <a> tag in the top right corner of a card using Bootstrap?

I own a card that features an image in the background. <div class="col-12 col-sm-8 col-md-6 col-lg-4 mt-4"> <div class="card"> <img class="card-img" style=" filter: brightness(75%);" src=& ...

htmlcssbootstrap-4

The code is not displaying correctly in Chrome, but it works fine when viewed on a live server

While developing a webpage in Vscode, I noticed that all my CSS and Bootstrap SASS styles render correctly. However, when opening the page without using Vscode live server, some of the styles are not being applied. ...

htmlcssbootstrap-4

initiate changes to the application's style from a component nested within the app

I'm looking to update the background color of the entire page, including the app-nav-bar, when I'm inside a child component. When I navigate away from that component, I want the default style to be restored. Any suggestions on how to achieve this ...

cssvue.jsvue-componentvuetify.js

Attempting to create a dynamic dropdown menu with animated effects triggered by a key press

I've been attempting to construct a menu that initially appears as a small icon in the corner. Upon pressing a key (currently set to click), the checkbox is activated, initiating the animation. Most of the menu and animation are functional at this po ...

javascripthtmlcsslua

In Javascript, swap out a particular colored region in an image with a different image

I've been scouring the internet in search of a solution to my problem, but it seems like I might not be looking in the right places. Imagine this image below, how can I replace the blue area with an image uploaded by the user? I'm struggling to ...

javascripthtmlcsshtml5-canvas