Solved

Oval shape radio button or checkbox in ASP,NET

Posted on 2016-08-16
5
68 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

679 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