如何使用CSS设计在asp.net中添加印度卢比符号到RadioButtonList控件



我已经创建了一个网页,将印度卢比符号添加到HTML元素。但现在我想把它添加到ASP中。. NET控件RadioButtonList。我如何在ASP中添加一个印度卢比符号到RadioButtonList控件。. NET使用CSS设计?

例如,我为html

做了下面的事情
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="rupees.css" type="text/css" rel="Stylesheet" />
    <link rel="stylesheet" type="text/css" href="http://cdn.webrupee.com/font">
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <span class="WebRupee"> Rs</span><span >1000</span>
    </form>
</body>
</html>

对于这个CSS设计如下

@font-face{font-family:‘WebRupee’;src:url(‘WebRupee.V2.0.eot’);src:local(‘WebRupee’), url(‘WebRupee.V2.0.ttf’)format(‘truetype’),url(‘WebRupee.V2.0.woff’)format(‘woff’),
url(‘WebRupee.V2.0.svg’)format(‘svg’);font-weight:normal;font-style:normal;}
.WebRupee{font-family:’WebRupee’;}
html>body.WebRupee{margin-right:2px;}
html>body.WebRupee{*margin-right:0;}

我想对asp.net控件做同样的事情。这可能吗?

下面是浏览器为RadioButtonList控件生成的代码-

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title><link href="rupees.css" type="text/css" rel="Stylesheet" /><link rel="stylesheet" type="text/css" href="http://cdn.webrupee.com/font" /></head>
<body>
    <form name="form1" method="post" action="RupeesProblem.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTcyMzk2OTU4M2RkdcYvBUoxXiWN7YJOjB8Ix2kUJK0=" />
</div>
<div>
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQL9g+WlDQKvu9S8DQL7vKHVCAKQkaOMDQKDmNvQBRIdCsAnK66SRJlauJNX6/Qy0f6E" />
</div>
   <table id="rd1" border="0">
    <tr>
        <td><input id="rd1_0" type="radio" name="rd1" value="first" /><label for="rd1_0">first</label></td><td><input id="rd1_1" type="radio" name="rd1" value="second" /><label for="rd1_1">second</label></td><td><input id="rd1_2" type="radio" name="rd1" value="third" /><label for="rd1_2">third</label></td>
    </tr>
</table>
    </div>
    </form>
</body>
</html>

谢谢

首先,尝试将CssClass='rupeeRadioButtonList'添加到<asp:RadioButtonList>标记。希望这将导致呈现的HTML中的<table>标签具有class="rupeeRadioButtonList"属性。

如果这不起作用,您可以将<asp:RadioButtonList>标签包装在<div>中,并使用该类:

<div class="rupeeRadioButtonList">
    <asp:RadioButtonList>....
</div>

那么你有两个CSS选项:

  1. 使用::after伪元素和content属性在<label>标签之后添加卢比符号:

    .rupeeRadioButtonList label::after {
        content: ' ₹';
    }
    /* (You can use ::before instead if the rupee symbol should go before the <label>) */
    

    (确保您的样式表保存并使用UTF-8编码,或任何包含卢比符号的编码。)

  2. 然而,::aftercontent直到版本8才被Internet Explorer支持(所有其他浏览器都支持它),所以你可能会(或者只是对于旧版本的IE,通过条件注释)想要使用背景图像:

    .rupeeRadioButtonList label {
        padding-right: 20px;/* Or whatever’s appropriate for your image */
        background: url(rupeeimage.gif) right center no-repeat;
    }
    

据我所知,问题是:

<asp:RadioButtonList ID="rd1" runat="server" RepeatDirection="Horizontal">
        <asp:ListItem Text="first"><span  class="WebRupee">Rs</span><span >1000</span></asp:ListItem>
        <asp:ListItem Text="second"><span class="WebRupee">Rs</span><span >1000</span></asp:ListItem>
        <asp:ListItem Text="third"><span class="WebRupee">Rs</span><span >1000</span></asp:ListItem>
    </asp:RadioButtonList>

最新更新