Home input:after not working in Microsoft EDGE browser
Reply: 0

input:after not working in Microsoft EDGE browser

Rohan Jacob
1#
Rohan Jacob Published in 2017-12-07 22:06:22Z

I am facing an issue with Microsoft Edge Browser. I am trying to hide the radio button's default round interface and customizing it with CSS.

It works well with Chrome and other Browser, But Microsoft Edge still showing the Round radio button and not showing the text content on input:after{content: 'Male'};. What am i doing wrong? How to hide the default interface on Edge? How to set content using CSS?

Try it Yourself: https://jsfiddle.net/o2havx71/1/

<html>
<head>
    <style>
        input{
            -webkit-appearance: none;
            -moz-appearance: none;
            margin: 0;
            left: 0;
            border-radius: 0;
            width: 30%;
            height: 70px;
            background: #fff;
            border-bottom: 5px solid #e2e7e8;
            padding: 0 35px;
        }
        input:checked { 
            background: #cedc00 !important; 
        }
        input:after{ 
            background-color:red; 
            content: 'Male';
        }

    </style>
</head>

<body>
    <input id="radio_1" type="radio" class="radio_btn" value="001" />
    <input id="radio_2" type="radio" class="radio_btn" value="002" />
</body>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.306561 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO