Ionic can i get round input - ionic-framework

Question

I need round input in ionic and if possible to use Floating something like this in the image. Its very easy in Flutter but dont know how can i do this in ionic. Or if just possible to make it round input ?
Here is image
enter image description here

Answer 1

to achieve that, you need to create your own component or get one from GitHub or Codepen or somewhere else. ionic does not provide anything like this.
Edited:
I made a component for you and I put it on Codepen. You just have to convert jQuery to your framework syntax.
Click to View on Codepen.io
Here is the component:
HTML:
<div class="container">
<div class="input-container">
<label>Name</label>
<input type="text">
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: Helvetica;
background: #eee;
-webkit-font-smoothing: antialiased;
}
.container {
width: 380px;
margin: 4em auto;
padding: 2em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px, rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
}
.input-container {
position: relative;
}
input {
font-size: 18px;
padding: 10px 15px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: 1px solid #999;
border-radius: 1000px;
}
input:focus {
outline: none;
border: 1px solid #00ff00;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
padding: 0 10px;
}
.stylee {
top: -20px;
transform: scale(.75);
left: -2px;
color: #00ff00;
}
JavaScript (jQuery):
$('input').focus(function() {
$(this).prev().addClass('stylee');
}).blur(function() {
if($(this).val())
{
$(this).prev().addClass('stylee');
}
else
{
$(this).prev().removeClass('stylee');
}
});