Can I make the line invisible in survey-likert scale?

[sonhkim]

Hi all!
So I have a Likert scale that looks like below:

Is it possible to make the line (in light grey) invisible? I'd like to show only the radio buttons, as the horizontal line somehow looks ugly. (At least I'd like to trim both ends..) I believe I have to tweak some lines in the codes down below (copied from jspsych-survey-likert.js), but can't figure it out myself.

var html = "";
    // inject CSS for trial
    html += '<style id="jspsych-survey-likert-css">';
    html += ".jspsych-survey-likert-statement { display:block; font-size: 16px; padding-top: 30px; margin-bottom:10px; }"+
      ".jspsych-survey-likert-opts { list-style:none; width:"+w+"; margin:auto; padding:10 10 35px; display:block; font-size: 25px; line-height:1.3em; }"+
      ".jspsych-survey-likert-opt-label { line-height: 0.9em; color: #444; }"+
      ".jspsych-survey-likert-opts:before { content: ''; position:relative; top:11px; /*left:9.5%;*/ display:block; background-color:#efefef; height:4px; width:100%; }"+
      ".jspsych-survey-likert-opts:last-of-type { border-bottom: 0; }"+
      ".jspsych-survey-likert-opts li { display:inline-block; /*width:19%;*/ text-align:center; vertical-align: top; }"+
      ".jspsych-survey-likert-opts li input[type=radio] { display:block; position:relative; top:0; left:50%; margin-left:-6px; }"
    html += '</style>';

[trig11]

This is probably not the smoothest version but you can just change the background color:

".jspsych-survey-likert-opts:before { content: ''; position:relative; top:11px; /*left:9.5%;*/ display:block; background-color:#ffffff; height:4px; width:100%; }"+

Changing it to #ffffff makes the line white, so you can just use whatever your background color is.

[becky-gilbert]

@trig11's works perfectly 👍 But just as another option: you could also set the display property to none in the CSS for .jspsych-survey-likert-opts::before.

And because the CSS that shows the line across the options is defined in the plugin file, it will take precedence over any CSS that you set in your HTML file (via an external .css file or style tags). So you can either modify the CSS in the plugin file, or add the CSS rule in your HTML file and use the !important flag to override the plugin's CSS rules:

<style> 
  .jspsych-survey-likert-opts:before {display:none !important;}
</style>

[sonhkim]

Thank you both!!