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
ArikkanAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.