?
Solved

Oval shape radio button or checkbox in ASP,NET

Posted on 2016-08-16
5
Medium Priority
?
121 Views
Last Modified: 2016-09-22
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
Comment
Question by:Arikkan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
5 Comments
 
LVL 82

Expert Comment

by:David Johnson, CD, MVP
ID: 41758854
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
 

Author Comment

by:Arikkan
ID: 41761329
@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
 

Author Comment

by:Arikkan
ID: 41781962
Any input or suggestion on this question is highly appreciated.
0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points (awarded by participants)
ID: 41783324
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question