如何使元素外觀可調整

Question

我試圖創建一個類似於Adobe Illustrator在調整大小或移動元素時的樣子。關於如何僅通過CSS實現這一點，我無法找到有用的資源。

Answer 1

JSFiddle

HTML：

<div id='input_container' class='resizeStyles'> 
    <label>Label:</label> 
    <input type='text' /> 
</div> 

CSS：

#input_container{position:relative; outline:#333 dashed 2px;} 

.resizeStyles:before, .resizeStyles:after{ 
    content:''; 
    position:absolute; 
    width:100%; 
    height:6px; 
    border-width:6px; 
    border-style:none dotted; 
    border-color:#333; 
} 
.resizeStyles:before{top:-4px; left:-6px;} 
.resizeStyles:after{bottom:-4px; right:-6px;} 

注意：我通過jQuery生成元素，所以這是有意義的我補充&刪除類.resizeStyles將樣式附加到。