将文本字段的CSS编辑为语音气泡

我正在创建我的第一个聊天程序（使用java中的图形），并且使用JavaFx场景生成器创建一个GUI，其中包含一些图片，然后有1-2个人可以与之聊天彼此。的想法是，当连接到服务器的客户端中有一个与另一个客户端进行通信时，就会显示一个小对话框。将文本字段的CSS编辑为语音气泡

我的想法是使用一个文本框创建该文本，然后我将在CSS中进行编辑，使其看起来像一个语音泡泡。

我怎么曾试图寻找的CSS样式表能够配置我的文本字段，但迄今没有任何工作是任何人都能够帮助我呢？到目前为止，两个样式表香港专业教育学院试过有这些：

.speech-bubble { 
    position:relative; 
    width: 320px; 
    padding: 10px; 
    margin: 3em; 
    background-color:#FFF; 
    color: #666; 
    font: normal 12px "Segoe UI", Arial, Sans-serif; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    border: 10px solid rgba(0,0,0,0.095); 
} 
.speech-bubble p { 
    font-size: 1.25em; 
} 

.speech-bubble:before, 
.speech-bubble:after { 
    content: "\0020"; 
    display:block; 
    position:absolute; 
    top:-20px; /* Offset top the height of the pointer's border-width */ 
    left:20px; 
    z-index:2; 
    width: 0; 
    height: 0; 
    overflow:hidden; 
    border: solid 20px transparent; 
    border-top: 0; 
    border-bottom-color:#FFF; 
} 
.speech-bubble:before { 
    top:-30px; /* Offset of pointer border-width + bubble border-width */ 
    z-index:1; 
    border-bottom-color:rgba(0,0,0,0.095); 
} 


    .bubble{ 
    background-color: #F2F2F2; 
    border-radius: 5px; 
    box-shadow: 0px 0px 6px #B2B2B2; 
    height: 200px; 
    margin: 20px; 
    width: 275px; 
} 

.bubble::after { 
    background-color: #F2F2F2; 
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4); 
    content: "\00a0"; 
    display: block; 
    height: 20px; 
    left: -10px; 
    position: relative; 
    top: 20px; 
    transform: rotate(45deg); 
    width: 20px; 
}

问题是，当我加入这个到我的文本框，如果我做错了，或者如果这些样式表不适合它不会改变外观，我不知道一个文本框

希望有人能够帮助我预先感谢您：

来源

2012-09-21 Marc Rasmussen