Anybody has an idea how to make these input fields ?

+1 Nikola Novakovic · December 10, 2014
Hello there! 

Came across intresting problem while working on some project. I nee to create something like this: 
/images/forum/upload/2014-12-10/283df9e96da5d659f047788310acf6d6.png

Those all need to be input fields. Of course the first one is a textarea and the two below can be input fields. Anybody has an idea on how to make this ? 

Post a Reply

Replies

Oldest  Newest  Rating
0 Nikola Novakovic · December 10, 2014
Also yes, keep in mind that I am using bootstrap 3 for creating everything on this project :) If I finish before someone answers I will post the code  I will post the code here :) 
0 Nikola Novakovic · December 10, 2014
Here is the code that actually built that thing :) 

    <div class="row guitar_bg">
        <div class="col-xs-12">
            <div class="col-xs-12">
                <div class="col-xs-8 col-xs-offset-2">
                    <textarea class="form-control aim_input" rows="5" placeholder="Write your aim" id="write_aim_field"></textarea>
                </div>
                <div class="col-xs-11 col-xs-offset-2">
                    <div class="col-xs-4 input_aims">
                        <input type="text" class="form-control write_aim input_place_style" placeholder="Set the deadline">
                    </div>
                    <div class="col-xs-4 input_aims">
                        <input type="text" class="form-control set_aim input_place_style" placeholder="Put the pledge">
                    </div>
                </div>
                <div class="col-xs-4 col-xs-offset-7">
                    <button type="submit" class="btn btn-default submit_aim_button">ok</button>
                </div>    
            </div>  
        </div>
    </div>



/****************** start of the styles for create aim page ***************/

.custom_nav {
    border-radius: 0;
    background: #33ccff;
    border-color: transparent;
    margin-bottom: 0;
}

.new_aim_button {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
    border-radius: 0;
}

.nav_dropdown {
    background: #33ccff;
    color: #fff;
}

    /* had to override bootstrap default color in the nav */
.navbar-default .navbar-nav>li>a {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    color: #fff;
    background-color: transparent;
}

.dropdown-menu>li>a {
    color: #fff;
}

.dropdown-menu>li>a:hover {
    background: transparent;
    color: #fff;
}
    /* end of overriden bootstrap default color in the nav */

.guitar_bg {
    background: url('../img/guitar_pic.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hide_scrollbar_overflow {
    overflow: hidden;
}

.aim_input {
   width: 92%;
   border-radius: 0;
   background-color: #33ccff;
   border:1px solid #fff;
   border-bottom:none; 
}

.input_aims {
    margin: 0;
    padding: 0;
}

.write_aim {
    border-radius: 0;
    background-color: #33ccff;
    border: 1px solid #fff;
    text-align: center;
}

.set_aim {
    width: 99.5%;
    border-radius: 0;
    background-color: #33ccff;
    border: 1px solid #fff;
    text-align: center;
}

.submit_aim_button {
    width: 14.7%;
    border-radius: 0;
    background: #33ccff;
    color: #fff;
}

.submit_aim_button:hover {
    background: #33ccff;
    color: #fff;
}
    /* Styling placeholders */

#write_aim_field::-webkit-input-placeholder {
    color: #fff;
    text-align: center;
    font-size: 3vw;
    opacity: 0.5;
}

#write_aim_field::-moz-placeholder {
    color: #fff;
    text-align: center;
    font-size: 3vw;
    opacity: 0.5;   
}

#write_aim_field:-ms-input-placeholder {
    color: #fff;
    text-align: center;
    font-size: 3vw;
    opacity: 0.5;
}

.input_place_style::-webkit-input-placeholder {
    color: #fff;
    text-align: center;
    font-size: 0.7vw;
    opacity: 0.5;   
}


/****************** end of the styles for create aim page ***************/



A lot of the code above is not perfect and will be optimized to reduce the redundancy of the code. But it does the job that I wanted it to do :) Hope this helps someone :) Oh and yeah this code also centers those fields on the middle of the screen and it is pretty responsive ;) 
  • 1

HTML / CSS / Web Design

106,991 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators