Skip to content

Instantly share code, notes, and snippets.

@tobynet tobynet/index.html
Created Feb 25, 2018

Embed
What would you like to do?
[PoC] CSS logging with React, ジャバボタン.css
<h1>[PoC] CSS logging in <code>`input type=password`</code> with React, ジャバボタン.CSS</h1>
<p><strong>Input "java"</strong> in the following password field like JavaButton.</p>
<div id="input-button" class="redjavabo"></div>
<p><a href="https://github.com/facebook/react/issues/11896">Original issue is here.</a></p>
// ref. https://reactjs.org/docs/forms.html
class InputButton extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "",
};
}
render() {
return (
<input
type="password"
value={this.state.value}
onChange={e => { this.setState({value: e.target.value }); }}
placeholder="無料ジャバのダウンロード"
/>
);
}
}
ReactDOM.render(<InputButton/>, document.getElementById('input-button'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
input[type="password"][value$="j"] {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/arigato-java/java_images/master/src/com/java/images/original/dl_button.png") !important;
}
input[type="password"][value$="a"] {
background-size: contain !important;
background-repeat: no-repeat;
background-image: url("https://raw.githubusercontent.com/arigato-java/java_images/master/src/com/java/images/original/happy_java.png") !important;
}
input[type="password"][value$="v"] {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/arigato-java/java_images/master/src/com/java/images/original/aoi-xhdpi.png") !important;
}
input[type="password"][value="java"] {
background-repeat: repeat;
background-size: contain;
background-image: url("https://raw.githubusercontent.com/arigato-java/java_images/master/src/com/java/images/original/happy_java.png");
}
input[type="password"] {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
border: none;
outline: none;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 2em;
padding-right: 2em;
font-size: 2em;
}
input[type="password"]::placeholder {
color: #f88;
}
/* JavaButton.css -*- coding: utf-8 -*- */
/* ここからカット */
/* Crimson Javabo */
.redjavabo {
display: inline-block;
text-decoration: none;
color: #fff;
font-family: 'MS Pゴシック', Osaka, sans-serif;
font-weight: bold;
background-color: #f00;
border-radius: .5em;
min-width: 11em;
background-image:
linear-gradient(
to bottom,
rgba(255,255,255,.17),
rgba(255,255,255,.23) 40%,
transparent 40%),
linear-gradient(to bottom, #ff8791, #b50010);
background-size: auto, auto;
background-position: 0px 0px, 0px 0px;
text-align: center;
margin: .5em;
}
.redjavabo:active {
box-shadow: none;
background-image: linear-gradient(to top, #aa3030, #b50010);
}
/* Royal Blue Javabo */
.bluejavabo {
display: inline-block;
padding-top: .5em;
padding-bottom: .5em;
padding-left: 2em;
padding-right: 2em;
min-width: 11em;
text-decoration: none;
color: #fff;
font-family: 'MS Pゴシック', Osaka, sans-serif;
font-weight: normal;
background-color: #007;
border-radius: .8em;
border: 2px solid #333;
background-color: #007;
background-image:
linear-gradient(to bottom,
rgb(125,227,255) 2px,
rgb(39,181,247) 2px,
rgb(7,123,242) 33%,
rgb(0,32,115) 50%,
rgb(0,34,70));
text-align: center;
margin: .5em;
}
/* ここまでカット */
/* pervasive */
body {
font-family: sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.