unit3.online registration form tricks: input field box align right and placeholder text right, but input text left.

-
TrickA:
align the input field box to right



1. make the input field to right 
the trick is: not float input field to right, you need to give the label margin-right:auto; then push the input field to right. 

    .container label{
        margin-right:auto;
}

2. but after that, the label is not level with input filed.



you have to fix it with:

.container label{
    justify-content:center;
    align-self:center;
}

then you will see the perfect picture:

3. but not end, you will find new issue:

the postcode area is also pushed to right, and the project require the postcode field short than others.
you will need a little math to fix it:
for example: 
your input area width is 80%; 
label is 15%, 
100-80-15=5
then you can set 5% between by:
label[for="postcode"]{
margin-right:5%
}
after that, you will get perfect picture.


TrickB
the place holder text showing on the right.


you can simply align the text to right by:
input[placeholder]{
    text-align:right;
}
but when you click the input filed, you will find the user has to type from right side, not start from left side.

you can fixed it by:
input:focus{
    text-align:left;
}


Well done, good job!










Comments

Post a Comment

Popular posts from this blog

how to code a weather forecast web

-
Image
  Let's work through the example we saw at the beginning: the weather forecast. The first step is to make the forecast look good on a small screen. The app at a narrow width. Next, resize the browser until there is too much white space between the elements, and the forecast simply doesn't look as good. The decision is somewhat subjective, but above  600px  is certainly too wide. The app at a point where we feel we should tweak the design. To insert a breakpoint at  600px , create two media queries at the end of your CSS for the component, one to use when the browser is  600px  and below, and one for when it is wider than  600px . @media ( max-width : 600px ) { } @media ( min-width : 601px ) { } Finally, refactor the CSS. Inside the media query for a  max-width  of  600px , add the CSS which is only for small screens. Inside the media query for a  min-width  of  601px  add CSS for larger screens. Pick minor breakpoints when necessary  # In addition to choosing major breakp
Read more

What Build Tools Do JavaScript Developers Use?

-
Image
  When starting a new JavaScript project, developers usually set up a build system using tools that help manage all of the moving parts of the project, and just about everything needed to build and run their application. Package Managers Many JavaScript applications rely on external dependencies like libraries, frameworks and other time-saving tools, which help developers avoid having to rewrite their own solutions to common problems. Libraries, frameworks and software are created and shared by the JavaScript community and brought into a project using a  package manager . A project could have tens or hundreds of external dependencies, and in many cases, some dependencies rely on other installed dependencies. Package managers install and keep track of all the dependencies of a project. They also simplify the process of upgrading, configuring and removing dependencies. The most popular JavaScript package manager is  npm  (node package manager). Another commonly used package manager is  Y
Read more

how to use :focus

-
  The browser uses the   outline   CSS property in its default style sheet to add the   :focus   styles to focused elements. In order to remove that and add your own   :focus   styles, all you have to do is add   outline: 0;   to the element whose   :focus   style you want to change, and then add your own. For example: a :focus { outline : 0 ; /* then add your own styles here */ } Outlines are similar to borders, but they’re not quite the same. You can read more about outlines and how they differ from borders in the  outline  property entry. When you’re styling links using  :focus  it is recommended that you provide the  :focus  styles after  :link  and  :visited  styles, otherwise the  :focus  styles would be overridden by those of  :link  and  :visited . In addition to these three pseudo-classes, the  :hover  and  :active  pseudo-classes are also used to style links, and they come  after   :focus  in the style sheet. The order mentioned is preferred to make
Read more

Numbers in JavaScript introduction

-
  By  Guil Hernandez Note:  To get the most out of instruction steps, be sure to write all of your code and avoid copying/pasting from the examples. Numbers in JavaScript are as straightforward as they sound; you don’t need any special syntax for numbers, you write them straight into JavaScript. In JavaScript, numbers can be whole numbers (called integers ). For example: 5 0 - 100 9999 Or numbers with decimal points to represent fractions of a whole number like: 3.14 - 9.88888 .0000009 Numbers like these with decimal points are also called " floating point numbers ." JavaScript even lets you use scientific notation to represent really large or really small numbers: 9 e - 6 // same as .000009 9 e + 6 // same as 9000000 Storing Numbers in Variables Just as with string values, you can put a number in a variable, or "assign" a number to a variable using the equals sign (or assignment operator): let score = 0 ; const pi = 3.141592653589793 ; const abs
Read more

WordPress Theme Development From Scratch - 3. Enqueuing CSS and JS to W...

-
Image
full screen view:  https://youtu.be/KtMwTBl-j8I functions.php file: <?php // Create the function function load_css () { // Register the style wp_register_style( ' my-style ', get_template_directory_uri() . ' /style.css ', array(), false, 'all' ); // Name, get template URL + CSS filename, dependencies, version number, media // Enqueue the style wp_enqueue_style('my-style'); } // Execute the function add_action('wp_enqueue_scripts', 'load_css'); Yellow hight portion can be customized. 'my-style' string name, could be any. '/style.css' string location, could be /css/style.css. depend on your style.css file location. *link functions file with pages, still need some work: 1. add <?PHP wp_head(); ?> right beyond the end of </head> in the single.php file(similar as HTML file) <?php wp_head (); ? > </ head > < body <?php body_class (); ? > id = "top" > <?p
Read more

review: Add Form Labels task3

-
  After the name field, add another input for email addresses. Set the  type  attribute to  "email" , the  id  attribute to  "email" , and the  name  to  "user_email" . <!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>HTML Forms</title>   </head>   <body>          <form action="index.html" method="post">       <label for="name">Name:</label>       <input type="text" id="name" name="user_name">       <label for="comment">Comment</label>       <textarea id="comment" name="user_comment"></textarea>       <input type="email" id="email" name="user_email">       <button type="submit">Submit Comment</button>     </form>   </body> </html>
Read more