Personalized Radio Styling and Multi-line Text Wrapping

After customizing our radio buttons for a survey form using CSS, we encountered an issue where the text wraps below the replacement graphic when it is too long. We want to avoid modifying the HTML as it has been generated by our CRM system, and making changes would require us to rebuild the entire survey from scratch which is time-consuming!

Unfortunately, I am unable to post the image here, but you can view it by following this link: https://i.sstatic.net/YV79T.png

HTML

    <td style="vertical-align: top;">
    <input name="q_197" value="1042" id="q_197_1042" type="radio">
    <label for="q_197_1042">I didn't get the chance to say everything I wanted 
to about stuff</label>
    </td>

CSS

label {
    min-width: 230px;
    padding-right: 10px;
    border-radius:3px;
    border:1px solid #D1D3D4;
}

/* hide input */


input[type=radio]:empty {
    display:none;
}
/* style label */



input[type=radio]:empty + label {
    position:relative;
    float:left;
    line-height:2.5em;
    text-indent:3em;
    margin:5px 1px 5px;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

input[type=radio]:empty + label:before {
    position:absolute;
    display:block;
    top:0;
    bottom:0;
    left:0;
    content:'';
    width:2em;
    background:#D3D3DB;
    border-radius:3px 0 0 3px;
}


/* toggle hover */


input[type=radio]:hover:not(:checked) + label:before {
    content:'\2714';
    text-indent:.6em;
    color:#C2C2C2;
}

input[type=radio]:hover:not(:checked) + label {
    color:#888;
}

/* toggle on */


input[type=radio]:checked + label:before {
    content:'\2714';
    text-indent:.6em;
    color:#F4F5F8;
    background-color:#0099FF;
}

input[type=radio]:checked + label {
    color:#777;
}

/* radio focus */


input[type=radio]:focus + label:before {
    box-shadow:0 0 0 3px #999;
}

textarea {
  -webkit-box-sizing: border-box;
  -mox-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

Answer №1

If you want to make a quick adjustment, just replace the text-indent with padding-left.

input[type=radio]:empty + label {
  position: relative;
  float: left;
  line-height: 2.5em;
  text-indent: 0em; /* change to padding-left */
  padding-left: 3em; /* adjust padding here */
  margin: 5px 1px 5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

This should provide a simple solution.

label {
  min-width: 230px;
  max-width: 230px;
  /* added for demonstration purposes */
  padding-right: 10px;
  border-radius: 3px;
  border: 1px solid #D1D3D4;
}
/* hiding input element */

input[type=radio]:empty {
  display: none;
}
/* styling label */

input[type=radio]:empty + label {
  position: relative;
  float: left;
  line-height: 2.5em;
  text-indent: 0em;
  padding-left: 3em;
  margin: 5px 1px 5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input[type=radio]:empty + label:before {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  width: 2em;
  background: #D3D3DB;
  border-radius: 3px 0 0 3px;
}
/* toggle hover effect */

input[type=radio]:hover:not(:checked) + label:before {
  content: '\2714';
  text-indent: .6em;
  color: #C2C2C2;
}
input[type=radio]:hover:not(:checked) + label {
  color: #888;
}
/* toggle when checked */

input[type=radio]:checked + label:before {
  content: '\2714';
  text-indent: .6em;
  color: #F4F5F8;
  background-color: #0099FF;
}
input[type=radio]:checked + label {
  color: #777;
}
/* focus on radio button */

input[type=radio]:focus + label:before {
  box-shadow: 0 0 0 3px #999;
}
textarea {
  -webkit-box-sizing: border-box;
  -mox-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}
<input name="q_197" value="1042" id="q_197_1042" type="radio">
<label for="q_197_1042">I didn't get the chance to say everything I wanted to about stuff</label>

Answer №2

To make it function properly, update input[type=radio]:empty + label to the code below:

input[type=radio]:empty + label {
    position:relative;
    float:left;
    margin:5px 1px 5px;
    padding:10px 10px 10px 50px;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

See it in action below:

label {
    min-width: 230px;
    padding-right: 10px;
    border-radius:3px;
    border:1px solid #D1D3D4;
}
/* hide input */
 input[type=radio]:empty {
    display:none;
}
/* style label */
 input[type=radio]:empty + label {
    position:relative;
    float:left;
    margin:5px 1px 5px;
    padding:10px 10px 10px 50px;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
input[type=radio]:empty + label:before {
    position:absolute;
    display:block;
    top:0;
    bottom:0;
    left:0;
    content:'';
    width:2em;
    background:#D3D3DB;
    border-radius:3px 0 0 3px;
}
/* toggle hover */
 input[type=radio]:hover:not(:checked) + label:before {
    content:'\2714';
    text-indent:.6em;
    padding-top: 10px;
    color:#C2C2C2;
}
input[type=radio]:hover:not(:checked) + label {
    color:#888;
}
/* toggle on */
 input[type=radio]:checked + label:before {
    content:'\2714';
    text-indent:.6em;
    color:#F4F5F8;
    background-color:#0099FF;
    padding-top: 10px;
}
input[type=radio]:checked + label {
    color:#777;
}
/* radio focus */
 input[type=radio]:focus + label:before {
    box-shadow:0 0 0 3px #999;
}
textarea {
    -webkit-box-sizing: border-box;
    -mox-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}
<td style="vertical-align: top;">
    <input name="q_197" value="1042" id="q_197_1042" type="radio">
    <label for="q_197_1042">I didn't get the chance to say everything I wanted to about stuff</label> 
</td>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to ensure that the design of this page flows seamlessly?

Interested in a design similar to this https://i.sstatic.net/wbXo2.jpg <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <title>Title</title> <style> html, body { height: 100%; margin: 0; ...

Troubleshooting a Navbar Issue in a Custom Bootstrap Template

I am a beginner in html and bootstrap, but I recently attempted to create my own bootstrap template. Initially, I tried to work with the "starter template" code from getbootstrap.com, but after launching the code and making some changes, the navigation bar ...

Using HTML div tags to create a looping expression that can interact with Javascript

Currently, I am working on a Ruby on Rails project and I am facing a challenge with looping variables in an HTML form to reduce the amount of manual code I have to write. However, when I attempt to evaluate an expression in the id attribute, the JavaScript ...

Achieve full height without scrolling in React

I am facing an issue where the height:100% property is not working to fill the remaining area on the screen. A red outlined area represents the border radius, while the highlighted yellow space should have been filled: https://i.stack.imgur.com/ZQNkw.png ...

Attempting to generate a cost estimator, however, no results are showing up upon clicking the calculate button

Having based my code on a template and being fairly new to Javascript, I expected everything to work smoothly. However, upon testing it, I encountered an issue where nothing was displayed in the results boxes. My goal is to develop a pricing calculator th ...

Automate website button clicks using Python and Selenium

I could really use some assistance: Currently, I have a Python/Selenium code snippet that carries out basic actions on a website to retrieve names, and it works perfectly fine. The objective: However, what I am aiming for is to automate these actions to ...

The vertical alignment feature seems to be malfunctioning in Bootstrap 4

My goal is to center multiple images within their respective divs, but I am facing issues with vertical alignment not working as intended. Even the CSS classes d-flex justify-content-end and text-center are failing to align the icons side by side. I need t ...

Steps for creating a border around a container Div:1. Set the width and

Seeking assistance in bordering a div with 4 fa-icons inside. The parent div is named Container, and as a result, the border is creating excessive padding on the left and right sides horizontally. Attempted nesting bootstrap grids without success. Can anyo ...

Is it possible to selectively process assets based on their type using Gulp and Useref?

Is it possible to selectively process css and js assets using gulp-useref based on the build type specified in the html tags? <!-- build:<type>(alternate search path) <path> --> ... HTML Markup, list of script / link tags. <!-- endbui ...

Having trouble aligning the form in the center?

Despite #container being centered, I am struggling to center the <form>. It is important for me to have all elements inside the form aligned horizontally and despite trying various techniques, it is not working as expected. <!-- Container Start - ...

Spacing between cards using Bootstrap

I have a collection of cards styled with Bootstrap and I am looking to add a left margin. I want the cards to be evenly spaced across the width. Right now, there is excess red on the right side that I want to remove... .azer { background: red; } .car ...

Interactive image popups with JavaScript

Seeking assistance in generating a popup when selecting an area on an image map using Javascript. As a novice in JS, I have successfully implemented popups for buttons before but encountered issues with this code within the image map - the popup appears br ...

DOJO Dialogue Box Report - Problem

I'm currently facing a challenge with incorporating javascript into the dialog box of my application. Here is an example of the code I am struggling with - var profileDialog1 = new Dialog({ title: "Create Profile", style: "width: 700px;he ...

When utilizing the `express.static(__dirname)` function in Node.js with Express, the visitor may be directed to an incorrect HTML page

My website consists of a login page named login.html and an index page named index.html. I want to implement authentication so that only logged in users can access the index page. I have not set up the post method on the login HTML page. Therefore, I have ...

Is there a way to divide extensive CSS files using Python?

The issue I am facing is due to the limitations of IE 8 on CSS files. Within my Flask project, some of my CSS files exceed these limits, causing them not to render correctly. Is there a way to split CSS files using Python in order to ensure that they meet ...

What is the best way to shift my content to the next line once it reaches a specific width in my paragraph

When a string is pulled from a database and inserted into a paragraph, it breaks perfectly if the paragraph has spaces. However, if a word is longer than the line, it goes off the page. How can I make it wrap to the next line instead of overflowing off the ...

Tips for positioning a navigation bar in the center for various screen resolutions

After hours of searching, I still can't find a solution to my problem. I'm new to this, and on my main monitor, everything looks centered just fine. 1920x1080: View larger image But on my 1280x1024 monitor: View smaller image As you can see, i ...

Tips for making the height of <select> and <button> elements equal even with padding

I'm trying to make sure that both the 'select' and 'button' elements have the same height. Check out my JS Fiddle here Here's the HTML code: <select><option>...</option></select><button>Button& ...

margin around the masterpage

Currently, I am utilizing a master page in ASP.NET (using Visual Studio Express 2015) and overall everything is functioning properly. However, there seems to be an unsightly space around the edges when viewing it in a browser. While not a critical issue, ...

Safari keyframe animation causing wobbly off-center rotation

When viewed on Safari, the spinning animation appears off-center. How can this issue be resolved? The CSS code responsible for the animation is as follows: html, body { height: 100%; } body { background: #a6b8b1; display: grid; place ...