How to move the icon / button outside the textbox x-webkit-speech?


Tags: javascript,jquery,css,html5,google-chrome

Problem :

i have itenter image description here

i want it enter image description here

my code html

<html>
<head></head>
<body>
    <input type="text" x-webkit-speech />
</body>
</html>

How I can do to move it with css, html or javascript?



Solution :

In the CSS:

.myclass::-webkit-input-speech-button{
    -webkit-transform: scale(0.0, 0.0);
    margin-right: 0px; //here for move icon example: margin-right: -10px
    position: absolute;
    z-index: 10;
}

.myclass:hover::-webkit-input-speech-button, .cajasmodales:focus::-webkit-input-speech-button{
    -webkit-transform: scale(1.0, 1.0);
    margin-right: 0px; //here for move icon example: margin-right: -10px
    position: absolute;
    z-index: 10;
}

In the HTML Code:

<html>
<head></head>
<body>
    <input class="myclass" type="text" x-webkit-speech />
</body>
</html>

    CSS Howto..

    How can I block/allow access to document.styleSheets information, and what is the reason for this

    How to Tie Events to CSS

    HTML/CSS: how to force text within a tag to be styled with font-style: italic !important;

    how to align button radio in css

    Horizontal navigation menu - how to increase size of
  • on hover
  • How to make the float left and float right on the same line?

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

    How to define a good convention for css?

    How can a user add content to a website? [closed]

    How to scale an entire webpage down to ipad or phone size

    How to Stop jQuery from Buffering Hover Effects?

    How to select nth child of specific tag with css?

    How can I use AngularJS directive to apply css style for a string?

    How to avoid css transformation(rotate) when removing class?

    How can I transform dots to line between CSS menu items?

    How to understand this CSS inheritance (or override, selection)

    What's the best way to show (un/ordered) HTML lists as a top-down tree?

    How do I prevent the element of an HTML5 form from moving slightly?

    How can I use the CSS pseudo-element :before{ content: '' } to affect an

    How to set a background color defined as a CSS class (using JQuery eventually)?

    How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

    How to make a slider with divs and variable width?

    How to add a css transition color change for a link/div background

    EXTREME beginner making a website from scratch, how do i center things, pictures, and zoom problems

    how to keep table 100% wide?

    how to make css animation smoothly for full-screen page?

    How to align a link icon after the text via CSS?

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    How to put background-color only a section of a select? CSS

    How does the CSS position on a div affects position of sibling division?