A <input type='text'> that hides border, and shows it when hover.

FlatTextInput.jsx

'use strict';

import React from 'react';
import _ from 'lodash';

export default React.createClass ({

    propTypes: {
        // Show border on hover and hide otherwise.
        borderOnHover: React.PropTypes.bool
    },

    getDefaultProps () {
        return {
            style: {
                borderWidth: 1,
                borderColor: 'grey'
            },
            borderOnHover: false,

            onMouseEnter: function () {},
            onMouseOut: function () {},
        };
    },

    getInitialState () {
        return {
            hover: false,
        };
    },

    handleOnMouseEnter (event) {
        this.setState({
            hover: true
        });

        this.props.onMouseEnter(event);
    },

    handleOnMouseOut (event) {
        this.setState({
            hover: false
        });

        this.props.onMouseOut(event);
    },

    getBorderColor () {
        if (this.props.borderOnHover) {
            if (!this.state.hover) {
                return 'transparent';
            }
        }

        let {style} = this.props;
        return style.borderColor;
    },

    render () {
        let {style, onMouseEnter, onMouseOut, ...others} = this.props;
        let borderColor = this.getBorderColor();

        return (
            <input
                style = {_.assign({}, style, {borderColor: borderColor})}
                type = 'text'
                onMouseEnter = {this.handleOnMouseEnter}
                onMouseOut = {this.handleOnMouseOut}
                {...others}
                />
        );
    }
})

Treat it like a , and use borderOnHover to make the border shows only when hover.
Like:

<FlatTextInput borderOnHover/>