2012年01月24日

Firefoxのボタンの囲み点線を消去。css

スポンサード リンク

 ::-moz-focus-inner

button

 Firefoxではボタンをクリックすると上のように囲み点線が現れます。
IEではボタンの枠線の内側に添って出るのでそれほど気にならないのですが.........。
この点線を消去するスタイルシートです。(Firefox)

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
<title>Firefoxのボタンの囲み点線を消去。</title>
 <style type="text/css">
<!--

       /* Firefoxのボタンの点線を消す */
  input[type="button"]::-moz-focus-inner,
  input[type="reset"]::-moz-focus-inner,
  input[type="submit"]::-moz-focus-inner {
     border: 0px;
      }
-->
</style>
</head>
<body>
  <form>
    <input type="button" value="点線を消したボタン">
  </form>
</body>
</html>
::-moz-focus-innerの値
 border: 0px;border-style: none; もしくは border-color: transparent;
書いてもOKです。
border-style: none;
border-color: transparent;

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
ボタン
borderプロパティ css
border-styleプロパティ; ボーダーのスタイルの設定
角丸吹き出しポップアップ CSS

posted by javaScript at 20:53 | 大阪 ☁ | ボタン | このブログの読者になる | 更新情報をチェックする

2009年06月30日

ボタンのラベルを点滅させます。

スポンサード リンク

ボタンを押すとラベルが点滅します。
もう一度押すと止まります。

サンプルソース

<html>
<head>
<title>ボタンのラベルを点滅させます</title>
<script language="JavaScript">
<!--
msg = new Array();
msg[0] = "ようこそ Javascript スタイルシート サンプル集 へ!!";
msg[1] = "    "; //空白の文字列

num = 0;
flag = false;
var tmrID;

function blinkmsg(){
flag = !flag; //トグルスイッチ trueとfalseの切り替え ! 否定演算子
if(flag == true) blinkmsg1();
else stp ();
}

function blinkmsg1(){ //ボタンのラベル(文字)を点滅させます。
document.getElementById("mybotan").value = msg[num];
num ^= 1; // 0と1の切り替え ^ 排他的論理和
tmrID = setTimeout('blinkmsg1()',1000); //点滅の間隔(単位は千分の一秒)
}

function stp(){ //文字の点滅を止めます。
clearTimeout(tmrID); // tmrID をクリアします
document.getElementById("mybotan").value =" スタート"; //ラベルの値を" スタート"にします
};
//-->
</script>

</head>
<body>
<form>
<input type="button" id="mybotan" value=" スタート" onclick="blinkmsg()"
style="width : 400px;text-align : center;">
</form>
</body>
</html>

文字 点滅
トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐
ボタンのラベルがスクロールします。
文字がフェードイン,フェードアウトします

posted by javaScript at 18:51 | 大阪 ☁ | ボタン | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。