• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 215
  • Last Modified:

Oval shape radio button or checkbox in ASP,NET

Hi Experts,

I'm working on project and need either radio button or check box in oval shape. Could any one tell one how to achieve this in ASP.net project? Please refer the attachment to see which depicts the requirement I've.

Any help would be highly appreciable.
OvalShape.png
0
Arikkan
Asked:
Arikkan
  • 2
1 Solution
 
David Johnson, CD, MVPOwnerCommented:
It can be done with CSS3 you need 2 images, checked and unchecked
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
1
 
ArikkanAuthor Commented:
@David Johnson: Thank you very much for the response! Examples are closer what I'm looking for.

I'm looking for a oval shape either radio button or checkbox just like as election  ballot. I've attached an image in my question. Do you know a way to make/alter such shape?

Any help will be greatly appreciatlable
0
 
ArikkanAuthor Commented:
Any input or suggestion on this question is highly appreciated.
0
 
RobOwner (Aidellio)Commented:
http://jsbin.com/yudawoqafu/edit?html,css,output

Essentially you hide the actual form elements (radio,checkbox) and style the spans within the labels
div {
  margin:0 0 0.75em 0;
}

input[type="radio"],
input[type="checkbox"] 
{
    display:none;
}
input[type="radio"] + label,
input[type="checkbox"] + label 
{
    color: #292321;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span,
input[type="checkbox"] + label span 
{
    display:inline-block;
    width:29px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span,
input[type="checkbox"] + label span
{
     background-color:white;/*#292321;*/
    border: 1px solid black;
}

input[type="radio"]:checked + label span
{
     background-color:#CC3300;
}
input[type="checkbox"]:checked + label span 
{
     background-color:#003300;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span,
input[type="checkbox"] + label span,
input[type="checkbox"]:checked + label span
{
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

Open in new window


adapted from: https://codepen.io/mitchmc/pen/pebIx
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now