Creating a custom design for input outline borders using CSS3

Question

Creating a custom design for input outline borders using CSS3

My CSS3 code is structured as follows:

input[type="text"], input[type="date"], textarea, input[type="radio"], input[type="number"],
    input[type="time"], input[type="password"] {
        background: #ffffff; /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMiUiIHN0...

Here is the HTML snippet I am working with:

 <form name="Login" action="Login.aspx" method="post"  runat="server">
            <p>
                Email: 
            <input type="text" name="Email" />
            </p>
            <p>
                Password:
            <input type="password" name="Password" />
            </p>
            <p>
                <button name="submit" class="blue-button" type="submit" style="margin-right:65px;">התחברות</button>
            </p>
        </form>

You can view a live example by visiting this link: http://jsfiddle.net/f4sp5/

The issue I am facing is that when I focus on an input field, all content below it shifts downwards. How can I prevent this unwanted movement?

Any advice would be greatly appreciated.

html forms css input

Answer 1

Answer №1

The reason for this issue is that your normal-state inputs have a border, but when they are focused, the border disappears as you have set it to do so. To fix this problem, you should either keep borders on both states or remove them from both...

http://jsfiddle.net/f4sp5/4/

Here's what I did:

input[type="text"]:focus {/*border: none;*/}

Answer 2

The reason for this issue is that your normal-state inputs have a border, but when they are focused, the border disappears as you have set it to do so. To fix this problem, you should either keep borders on both states or remove them from both...

http://jsfiddle.net/f4sp5/4/

Here's what I did:

input[type="text"]:focus {/*border: none;*/}

Answer 3

Answer №2

In my opinion, the reason for this behavior is that when you remove a border and add padding on :focus, it essentially changes the width of the element - to fix this issue, you can try including the following CSS properties:

box-sizing: border-box; and -moz-box-sizing: border-box; for Firefox - by doing this, you will restrict the padding and border within the content width of the element.

Here's a jsFiddle example

Answer 4

In my opinion, the reason for this behavior is that when you remove a border and add padding on :focus, it essentially changes the width of the element - to fix this issue, you can try including the following CSS properties:

box-sizing: border-box; and -moz-box-sizing: border-box; for Firefox - by doing this, you will restrict the padding and border within the content width of the element.

Here's a jsFiddle example

Creating a custom design for input outline borders using CSS3

Answer №1

Answer №2

Similar questions

Tips for transforming a container div into a content slider

Mobile media queries are ineffective despite implementing the viewport meta tag

Submitting a value to ngForm: A step-by-step guide

"Creating Eye-Catching CSS Animation Effects with Dynamic Initial States

What is the method for calculating values entered into dynamic input fields?

The functionality of Selenium's get(link) feature appears to be experiencing issues

Properly Adding an External jQuery File in HTML Using jQuery

Securing PHP Code with HTML Encoding

Event handlers for textboxes in Visual Web Developer are a crucial component for

Utilizing Wordpress post images to dynamically change background URLs in CSS

Enhancing CSS with Additional Properties

Optimizing the speed and load performance of SQLite in Phonegap

Uploading CSV files in Angular 4

Creating a Visual Loading Effect in HTML

Using class binding for both ternary and non-ternary attributes

The submit button click does not trigger the execution of ajax code

Creating a mandatory 'Select' dropdown field in Vue.js

Choose the div without a class

Instructions for implementing tooltips on a pie chart slice when hovering with the mouse pointer, using the canvas

Tips for maintaining the parent's width during a resize operation