This article aims to solve the problem of how to align the text of radio buttons and check boxes in CSS, and how to make the form occupy the entire page and add scroll bars. By removing unnecessary centering styles and adjusting the page height using CSS properties, you can achieve the desired layout effect. This article provides detailed CSS code examples and HTML structures to help developers easily achieve their goals.

Align text for radio buttons and checkboxes

By default, the text of radio buttons and check boxes may be centered because they inherit the text-align: center; style from the parent element. In order to align this text to the left, these centering styles need to be removed or overridden.

Solution:

1. Remove unnecessary centering styles: Check whether the parent element containing radio buttons and checkboxes has the text-align: center; style applied. If present, remove the style. In the provided code, the .form-group class includes the text-align: center; attribute, which causes the radio and check boxes to be centered. Therefore, you need to remove the .form-group class from the div element containing the radio button, or override the text-align attribute of the class.
2. Apply left-aligned style: Apply text-align: left; style to the labels of radio buttons and check boxes. This can be accomplished by styling the element directly, or through a CSS class.

Sample code:

HTML:

 <div>
    <label>
        <input type="radio" name="referal" class="inline" value="definitely"> Definitely
    </label><br>
    <label>
        <input type="radio" name="referal" class="inline" value="maybe"> Maybe
    </label><br>
    <label>
        <input type="radio" name="referal" class="inline" value="definitelyNot"> Definitely not
    </label><br>
</div>

<div>
    <p>What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
    <label>
        <input type="checkbox" name="improved" class="input-checkbox" value="frontend"> Front-End skills<br>
    </label>
    <label>
        <input type="checkbox" name="improved" class="input-checkbox" value="backend"> Back-End skills<br>
    </label>
    
</div>

CSS:

 .text-center {
    text-align: center;
    margin: auto;
}

.form-group {
    margin: auto; /* Removed text-align: center; */
}

.clue {
    text-align: center;
}

.input-checkboxes {
    text-align: center;
}

.inline {
    margin-right: 6px;
    text-align: left; /* Add this line */
}

explain:

• .text-center: Used to center text such as titles and descriptions.
• .form-group: Originally used to contain form elements, but text-align: center was removed to avoid affecting the alignment of radio buttons and check boxes.
• .inline: Label for radio buttons and checkboxes, added text-align: left to align text to the left.

Achieve full screen and scrolling effects on the page

To make the form occupy the entire page and add scroll bars, you need to ensure that the height of the body element is 100% and that the form content can scroll when it exceeds the screen height.

Solution:

1. Set the height of the body element: Set the height of the body element to 100vh, making sure it occupies the entire height of the viewport.
2. Make sure the content exceeds the screen height: If the form content is not enough to fill the entire page, you can add some content or adjust the minimum height of the container.
3. Add scroll bars: When content exceeds the height of the screen, the browser automatically adds scroll bars.

Sample code:

CSS:

 body {
    background: url(images/tech2.webp);
    background-size: 100%;
    min-height: 100vh; /* Changed height to min-height and added vh unit */
    margin: 0; /* Reset default margin */
    padding: 0;
}

.container {
    grid-column: 5 / 9;
    max-width: 600px;
    margin: 20px auto 20px;
    padding: 30px;
    border: 1px solid black;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.763);
}

explain:

• min-height: 100vh;: Ensure that the body element occupies at least the height of the entire viewport. Using min-height instead of height ensures that content can be scrolled if it exceeds the screen.
• margin: 0; padding: 0;: Resets the default margins and padding of the body element to ensure that page content hugs the edges.

Complete code example

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css">


    <header class="header">
        <h1 id="title" class="text-center">Survey Form</h1>
        <p id="description" class="description text-center">Thank you for taking the time to help me improve my skills as a developer</p>
    </header>

    <div class="container">
        <form id="survey-form">
            <div class="form-group">
                <label id="name-label" for="name">Name: 
                    <input required id="name" type="text" placeholder="Name">
                </label><br>
            </div>

            <div class="form-group">
                <label id="email-label" for="email">Email: 
                    <input required id="email" type="email" placeholder="E-mail">
                </label><br>
            </div>

            <div class="form-group">
                <label id="number-label" for="number">Age: 
                    <input required id="number" min="13" max="120" type="number" placeholder="Age">
                </label><br>
            </div>

            <div class="form-group">
                <p>Which option best describes your current role?</p>
                <select id="dropdown" name="role" class="form-control" required>
                    <option disabled selected>Select current role</option>
                    <option value="student">Student</option>
                    <option value="teacher">Teacher</option>
                    <option value="job">Full time job coding</option>
                    <option value="preferNo">Prefer not to say</option>
                    <option value="other">Other</option>
                </select><br>
            </div>

            <div>
                <p class="text-center">Based on my portfolio/resume, would you say that I am job ready?</p>
                <label>
                    <input type="radio" name="referal" class="inline" value="definitely"> Definitely
                </label><br>
                <label>
                    <input type="radio" name="referal" class="inline" value="maybe"> Maybe
                </label><br>
                <label>
                    <input type="radio" name="referal" class="inline" value="definitelyNot"> Definitely not
                </label><br>
            </div>

            <div class="form-group">
                <label>In your opinion, what would you say is my strongest skill?<br>
                    <select id="improved" name="improved" class="form-control" required>
                        <option disabled selected>Select an option</option>
                        <option value="html/css">HTML/CSS</option>
                        <option value="javascript">Javascript</option>
                        <option value="ui/ux">UI/UX Design</option>
                        <option value="response">Responsiveness/Functionability</option>
                        <option>Project Ideas</option>
                    </select><br>
                </label>
            </div>

            <div>
                <p class="text-center">What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
                <label>
                    <input type="checkbox" name="improved" class="input-checkbox" value="frontend"> Front-End skills<br>
                </label>
                <label>
                    <input type="checkbox" name="improved" class="input-checkbox" value="backend"> Back-End skills<br>
                </label>
                <label>
                    <input type="checkbox" name="improved" class="input-checkbox" value="ui/ux"> UI/UX Design<br>
                </label>
                <label>
                    <input type="checkbox" name="improved" class="input-checkbox" value="response"> Responsiveness/Functionality<br>
                </label>
                <label>
                    <input type="checkbox" name="improved" class="input-checkbox" value="response"> Project Ideas<br>
                </label>
                <label>
                    <input type="checkbox" name="improved" class="input-checkbox" value="number"> Number of Projects<br>
                </label>
            </div>

            <div class="form-group">
                <p>Any other comments or suggestions?</p>
                <textarea name="comments" id="comments" rows="3" cols="30" class="input-textarea" placeholder="Enter your comments here..."></textarea>
            </div>

            <div class="form-group">
                <button type="submit" id="submit" class="submit-button">Submit</button>
            </div>
        </form>
    </div>

 /* styles.css */
.text-center {
    text-align: center;
    margin: auto;
}

.form-group {
    margin: auto;
}

.clue {
    text-align: center;
}

.input-checkboxes {
    text-align: center;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: lato, arial;
}

body {
    background: url(images/tech2.webp);
    background-size: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.container {
    grid-column: 5 / 9;
    max-width: 600px;
    margin: 20px auto 20px;
    padding: 30px;
    border: 1px solid black;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.763);
}

header {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

h1 {
    margin-bottom: 5px;
}

.checkbox, .radio-button {
    display: block;
}

.inline {
    margin-right: 6px;
    text-align: left;
}

#submit {
    font-size: 16px;
    display: block;
    margin: 0 auto;
    background: #2f80ed;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
}

@media only screen and (max-width: 1000px) {
    .container {
        grid-column: 1 / 12;
    }
}

Summarize

By removing unnecessary centering styles and using CSS properties to adjust the page height, you can easily achieve text alignment of radio buttons and check boxes, as well as full-screen scrolling effects. In actual development, the style can be adjusted according to specific needs to achieve the best layout effect. Always remember to check and reset default styles to avoid unnecessary style conflicts.

The above is the detailed content of CSS layout tips: Align radio buttons and check boxes, and achieve full-screen scrolling effects on the page. For more information, please follow other related articles on the PHP Chinese website!