Solved

Oval shape radio button or checkbox in ASP,NET

Posted on 2016-08-16
5
60 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:SHANCHAT972
  • 2
5 Comments
 
LVL 80

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:SHANCHAT972
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:SHANCHAT972
ID: 41781962
Any input or suggestion on this question is highly appreciated.
0
 
LVL 43

Accepted Solution

by:
Rob earned 500 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
abstract class C# 1 31
How to use NFS (Network File System) in Asp.net mvc 5? 4 43
Javascript 2 20
Overflow: auto does not stretch with position: absolute 3 14
This article discusses four methods for overlaying images in a container on a web page
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

839 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