Problem with the focused input form

Topic: Problem with the focused input form

Alex Motan free asked 6 years ago

I can't seem to find the text and the bar highlight colors for the focused input form. I pretty much looked everywhere. Any tips? Thanks. I want to change the text color and the bar highlight colors that appear when we click the respective input form.

Add comment

Michal Szymanski staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

To change a focus-color use this code:

input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
input[type=date]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=search-md]:focus:not([readonly]),
textarea.md-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #yourColor;
  box-shadow: 0 1px 0 0 #yourColor;
}

By "not-centered" do you mean, they are stretched full width? If yes, just remove .btn-block class and wrap your button into a "text-xs-center" div to center them.

Add comment

Alex Motan free answered 6 years ago

0 0 Best answer

Also, is there a reason why these buttons are not centered?
http://imgur.com/QvlWGy3

<pre><code>    <div class="modal fade modal-ext" id="modal-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h3><i class="fa fa-edit"></i> Login</h3>
                </div>
                <div class="modal-body" >
                    <form class="md-form" action="index.php" method="post" enctype="multipart/form-data">
                    <div class="md-form">
                        <i class="fa fa-user prefix"></i>
                        <input type="text" name="username" id="form2" class="form-control validate">
                        <label for="form2" data-error="" data-success="">Username</label>
                    </div>
                    <div class="md-form">
                        <i class="fa fa-lock prefix"></i>
                        <input type="password" name="password" id="form3" class="form-control validate">
                        <label for="form3" data-error="" data-success="">Password</label>
                    </div>
                    <div class="md-form">
                        <button class="btn btn-success btn-block" type="submit" name="login"><i class="fa fa-sign-in"></i> Login</button>
                    </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="options" >
                        <button type="button" class="btn btn-danger btn-block" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                </div>
            </div>
        </div>
    </div>
</code></pre>

Please insert min. 20 characters.

Also, is there a reason why these buttons are not centered? http://imgur.com/QvlWGy3

    <div class="modal fade modal-ext" id="modal-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h3><i class="fa fa-edit"></i> Login</h3>
                </div>
                <div class="modal-body" >
                    <form class="md-form" action="index.php" method="post" enctype="multipart/form-data">
                    <div class="md-form">
                        <i class="fa fa-user prefix"></i>
                        <input type="text" name="username" id="form2" class="form-control validate">
                        <label for="form2" data-error="" data-success="">Username</label>
                    </div>
                    <div class="md-form">
                        <i class="fa fa-lock prefix"></i>
                        <input type="password" name="password" id="form3" class="form-control validate">
                        <label for="form3" data-error="" data-success="">Password</label>
                    </div>
                    <div class="md-form">
                        <button class="btn btn-success btn-block" type="submit" name="login"><i class="fa fa-sign-in"></i> Login</button>
                    </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="options" >
                        <button type="button" class="btn btn-danger btn-block" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                </div>
            </div>
        </div>
    </div>

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

User: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Alex Motan

10Support score
1Questions 1Answers 0Snippets