浮雲雅築: [研究][ASP.NET] HTML 和 ASP.NET Checkbox 核取按鈕放大

[研究][ASP.NET] HTML 和 ASP.NET Checkbox 核取按鈕放大

2020-05-21

Visual Studio 2019 v16.6.0
WebForm

標黃色是根據結果，有效果的寫法。( 但是有些方是只對某些瀏覽器有效)

標準HTML5語法的checkbox是不支援放大 checkbox 按鈕的語法的

input type=checkbox – checkbox - HTML5

https://www.w3.org/TR/2011/WD-html-markup-20110113/input.checkbox.html

scale() - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

Defatult.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication8.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <style>
        input.largerCheckbox {
            width: 40px;
            height: 40px;
        }

        input.largerCheckbox2 {
            transform: scale(2);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input id="Checkbox1" type="checkbox" />1
            <input id="Checkbox2" type="checkbox" style="width: 40px; height: 40px;" />2
            <input id="Checkbox2" type="checkbox" width="40" height="40" />2A
            <input id="Checkbox3" type="checkbox" class="largerCheckbox" />3
            <input id="Checkbox4" type="checkbox" class="largerCheckbox2" />4
            <input id="Checkbox4A" type="checkbox" style="transform: scale(2);" />4A

            <asp:CheckBox ID="CheckBox5" runat="server" />5
            <asp:CheckBox ID="CheckBox6" Width="40px" Height="40px" runat="server" />6
            <asp:CheckBox ID="CheckBox7" Style="width: 40px; height: 40px;" runat="server" />7
            <asp:CheckBox ID="CheckBox12" style="width: 40px; height: 40px;" runat="server" />7A
            <asp:CheckBox ID="CheckBox8" CssClass="largerCheckbox" runat="server" />8
            <asp:CheckBox ID="CheckBox9" CssClass="largerCheckbox2" runat="server" />9
            <asp:CheckBox ID="CheckBox10" Style="transform: scale(2);" runat="server" />10
            <asp:CheckBox ID="CheckBox11" Style="transform: scale(3);" runat="server" />11
        </div>
    </form>
</body>
</html>

IE 11執行結果如下

Chrome 83 執行結果如下

FireFoxChrome 76.0.1 執行結果如下

檢視網頁原始碼

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title>

    <style>
        input.largerCheckbox {
            width: 40px;
            height: 40px;
        }

        input.largerCheckbox2 {
            transform: scale(2);
        }
    </style>
</head>
<body>
    <form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ivpILa/iTRxyaTNpCeaTgZR5A11PHgQMQ4pkEFnuVXKFN0ZBQWEw+4jmsLKc99VlrmIDQLrt4rJV9ZgJ7VDan+gDNeLYGhYpmIE0Ki9rwoX3PyL4r6qXShdbyosB4/ccNmqNieA4/5mITmEpSEUaziE6olrfDPhNh9xaunKpAMepzue+V1wSbhE9hcaozqXRWa4ANS1ZdHdCbgGE7DsmcdCntYuoYs0v6nULd0uCwa/TqO4v2nQp/ICkLuanxpni" />
</div>

<div class="aspNetHidden">

 <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
 <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="VY7GE9QnsYxWfLya+Munapywu+p71t2BtAJFDuZ/XNt0PwNkBtTR6vXcKTMpSYzvh7I5hxvsQICgHGDpfbXRcA4S5RbSxvGEW0hFo2Gpto7yumt+me9MSvsfon5/2eJlqYZKiHmtXPxFaJEDm2uU+jpNRelsu0d39TioITTl7Z1kCAhYiJcB66dnoWmGngv7UpZjBAwkhX3qX6L96cbWl19EhONd/DT3vkUKKg6zPyTm6Um4KMWVoWlRHm6+hI1nU6k+tPK8wv/8nbQLbwZtoQ==" />
</div>
        <div>
            <input id="Checkbox1" type="checkbox" />1
            <input id="Checkbox2" type="checkbox" style="width: 40px; height: 40px;" />2
            <input id="Checkbox2" type="checkbox" width="40" height="40" />2A
            <input id="Checkbox3" type="checkbox" class="largerCheckbox" />3
            <input id="Checkbox4" type="checkbox" class="largerCheckbox2" />4
            <input id="Checkbox4A" type="checkbox" style="transform: scale(2);" />4A

            <input id="CheckBox5" type="checkbox" name="CheckBox5" />5
            <span style="display:inline-block;height:40px;width:40px;"><input id="CheckBox6" type="checkbox" name="CheckBox6" /></span>6
            <span style="width: 40px; height: 40px;"><input id="CheckBox7" type="checkbox" name="CheckBox7" /></span>7
            <span style="width: 40px; height: 40px;"><input id="CheckBox12" type="checkbox" name="CheckBox12" /></span>7A
            <span class="largerCheckbox"><input id="CheckBox8" type="checkbox" name="CheckBox8" /></span>8
            <span class="largerCheckbox2"><input id="CheckBox9" type="checkbox" name="CheckBox9" /></span>9
            <span style="transform: scale(2);"><input id="CheckBox10" type="checkbox" name="CheckBox10" /></span>10
            <span style="transform: scale(3);"><input id="CheckBox11" type="checkbox" name="CheckBox11" /></span>11
        </div>
    </form>
</body>
</html>

********************************************************************************

方法2

對 asp:Checkbox 或 input type="checkbox" 在 IE11 或 Chrome 下都有效，對 FireFox 無效。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
</title>
<link href="./CSS/MyCss.css" rel="stylesheet" type="text/css">
<style>
.LargeCheckBox input,
.LargeCheckBox2 input {
	height: 30px;
	width: 30px;
}
</style>
</head>
<body>
    <div class="LargeCheckBox">
	<input id="C1" type="checkbox" name="ct1">John
        <asp:CheckBox ID="CheckBox1" runat="server" />Mary
    </div>
</body>
</html>

也可寫成2個檔案

MyCss.cs

@charset "utf-8";

.Con_OkT input,

.Con_OkT2 input {

height: 30px;

width: 30px;

}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
</title>
<link href="./CSS/MyCss.css" rel="stylesheet" type="text/css">
<style>
.LargeCheckBox input,
.LargeCheckBox2 input {
	height: 30px;
	width: 30px;
}
</style>
</head>
<body>
    <div class="LargeCheckBox">
	<input id="C1" type="checkbox" name="ct1">John
        <asp:CheckBox ID="CheckBox1" runat="server" />Mary
    </div>
</body>
</html>

(完)

浮雲雅築

2020年5月21日星期四

[研究][ASP.NET] HTML 和 ASP.NET Checkbox 核取按鈕放大

沒有留言:

張貼留言

2020年5月21日 星期四

[研究][ASP.NET] HTML 和 ASP.NET Checkbox 核取按鈕放大

沒有留言:

張貼留言

2020年5月21日星期四