I have multiple radio buttons(choice column) on new form of a SharePoint list.

Each of my choice column contains 10 values ranging from 1 to 10(10 radio buttons) and they are displayed vertically.

What I want to do is to display all radio button horizontally in one line.

Any suggestions on how to do it?



Try with margin-left CSS。


enter image description here

<style type="text/css">
        input[type="radio"] {
            margin-left: 10px;

<input type="radio" checked="checked" name="edit" value="A">A
    <input type="radio" name="edit" value="B">B
    <input type="radio" name="edit" value="C">C


Try this JS code:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            var reBuildTR = $('<tr></tr>').append("<th></th>");
            //update RadioField as your field name
            $('table[id^="RadioField"]').find('td').each(function () {

enter image description here

  • I want to make changes in the default share point new form. I do not have a custom form. Oct 30 '18 at 5:59
  • i tried to use SPServices for the same but it does not work,i don't know why Oct 30 '18 at 6:15
  • Try the update.
    – Lee_MSFT
    Oct 30 '18 at 6:32
  • do i have to change any id in the above code? Oct 30 '18 at 6:42
  • Just add the display name of your choice field instead of "RadioField" at the line $('table[id^="RadioField"]') Oct 30 '18 at 6:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.