押された<button> CSS

押されたときにスタイルを変更するボタンを作成したいと思います。これは私のCSSコードです：押された<button> CSS

button { 
 
    font-size: 18px; 
 
    border: 2px solid gray; 
 
    border-radius: 100px; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
button:active { 
 
    font-size: 18px; 
 
    border: 2px solid red; 
 
    border-radius: 100px; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<button>Button</button>

私がそれに&ホールドをクリックしたときにのみ変更されます。私はそれが押された後にスタイルを変えるようにしたい。たとえば、通常の状態は白で、クリックされている間は緑で、クリックが解放されると赤で表示されます。

出典

2013-03-17 Kyrbi

JavaScriptを追加する必要があります。 – MattDiamant

これはCSSを使用して非常に可能ですが、これはCSSのために設計されたものではありません。 JavaScriptを検討する –

可能な複製http://stackoverflow.com/questions/8830048/how-to-get-css-button-to-stay-active-after-has-been-clicked –

ボタンの代わりに<a>タグを使用すると、これを行うことができます。私はあなたのために尋ね、それは正確ではありません知っているが、あなたはこの解決策を見つけることができない場合、それはあなたにいくつかの他のオプションを与えるかもしれない：

a { 
 
    display: block; 
 
    font-size: 18px; 
 
    border: 2px solid gray; 
 
    border-radius: 100px; 
 
    width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
    line-height: 100px; 
 
} 
 

 
a:active { 
 
    font-size: 18px; 
 
    border: 2px solid green; 
 
    border-radius: 100px; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
a:target { 
 
    font-size: 18px; 
 
    border: 2px solid red; 
 
    border-radius: 100px; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<a id="btn" href="#btn">Demo</a>

：私はこれを作成し、ここで別の答えからデモから

借入を

:targetの使用に注意してください。要素がハッシュを介してターゲットにされたときに適用されるスタイルになります。これはあなたのHTMLが次のようになることを意味します：<a id="btn" href="#btn">Demo</a>それ自身をターゲットとするリンク。ここ@BenjaminGruenbaumするデモhttp://jsfiddle.net/rlemon/Awdq5/4/

おかげでより良いデモは次のとおりです。また、http://jsfiddle.net/agzVt/

_{、脚注として：これは本当に要素からCSSクラスを削除/ JavaScriptと適用を行うべきです。それはずっと複雑ではないだろう。}

出典

2013-03-17 17:43:56 rlemon

+1正しい解決策。ここでは、私はこのソリューションをより良く考えていると思うのは、http://jsfiddle.net/agzVt/ –

ここでは、ホバー効果を追加するクリーンアップデモですhttp://jsfiddle.net/KyleMit/agzVt/153/ – KyleMit

それはです少しハッキーだけどね？クリック完了時にフォーカスを放棄するボタンがない（非JS）方法はありますか？ –

:focusを使用できます。これは、ユーザーが他の場所をクリックしない限りスタイルを維持します。

button:active { 
    border: 2px solid green; 
} 

button:focus { 
    border: 2px solid red; 
}

出典

2013-03-17 17:32:22

これは良い解決策ではありません、彼は何を求めているのではありませんCSSの方法はチェックされたセレクタを使ってチェックボックスを使うことです。 –

@BenjaminGruenbaumこれは良い点です。ボタンは実際にはトグルするようには設計されていません。 –

ボタンを押すと新しいページが表示されます。

たとえば、ボタンがpagename.phpという名前のページにリンクしている場合、url：www.website.com/pagename.phpボタンをクリックすると、そのページに留まる間、ボタンは赤色のままになります。

URL [0] = pagename.php

<? $url = explode('/', substr($_SERVER['REQUEST_URI'], strpos('/',$_SERVER['REQUEST_URI'])+1,strlen($_SERVER['REQUEST_URI']))); ?> 


<html> 
<head> 
    <style> 
    .btn{ 
    background:white; 
    } 
    .btn:hover, 
    .btn-on{ 
    background:red; 
    } 
    </style> 
</head> 
<body> 
    <a href="/pagename.php" class="btn <? if (url[0]='pagename.php') {echo 'btn-on';} ?>">Click Me</a> 
</body> 
</html>

注：

は、私のような '/' だ何かにURLを爆発私はこのコードをしようとしませんでした。調整が必要な場合があります。

出典

2013-07-19 00:46:36

アンカーは、クリックするかマウスを動かすと両方のクラスを持ち、btn-onは、クラスbtnの後にエコーアウトされるカスケード規則に従ってwhats upを返すものです。 –

少しJSを含める必要がありますか？ CSSは基本的にこの仕事のために作られたものではなかったからです。 CSSはHTMLにスタイルを追加するためのスタイルシートに過ぎませんでしたが、その擬似クラスは基本的なCSSができないことを行うことができます。例えば、button:active activeは擬似です。

参考：

http://css-tricks.com/pseudo-class-selectors/あなたがここに疑似についての詳細を学ぶことができます！

あなたのコード：あなたは基本的なものの参考になっを抱えている

コード。はいはい:activeは、クリックイベントが発生した後にのみ発生します。

button { 
font-size: 18px; 
border: 2px solid gray; 
border-radius: 100px; 
width: 100px; 
height: 100px; 
} 

button:active { 
font-size: 18px; 
border: 2px solid red; 
border-radius: 100px; 
width: 100px; 
height: 100px; 
}

これはCSSはどうなるのかで、どのような提案rlemonことは良いですが、それは彼がaタグを必要とする提案されたようです。あなたも:focusを使用することができます

：どのようにCSSを使用する

。 :focusは、クリックが行われた後に動作し、別の場所をクリックするまで残ります。これはCSSで、CSSを使用しようとしていたので、:focusを使用してボタンを変更します。

JSはどうなるのか：

のJavaScriptのjQueryライブラリは、このコードのために私たちを助けるために起こっています。ここにその例を示します。

$('button').click(function() { $(this).css('border', '1px solid red'); }

これは、クリックが消えてもボタンが赤くなっていることを確認します。フォーカスタイプを変更する（赤の色を他の色に変更する）には、次のようにします。

$('button').click(function() { $(this).css('border', '1px solid red'); // find any other button with a specific id, and change it back to white like $('button#red').css('border', '1px solid white'); }

このようにして、ナビゲーションメニューを作成します。クリックすると自動的にタブの色が変わります。 :)

あなたは答えを得ることを望みます。がんばろう！乾杯。

出典

2013-09-24 15:52:04

答えて

関連する問題