lpisme是个很漂亮的格子主题,也是博主的另一个typecho博客《小鸟数据》所用的主题,有天发现该主题的搜索框输入有点小问题,于是自己研究了一下。问题的具体表现是搜索文章时光标总是靠左,输入较复杂的词语时会出现语序颠倒的现象,利用审查元素查看了一下搜索框的代码,发现输入框的dir属性是rtl,原因可能就出在这里了。
<form id="search" method="post" action="/" role="search">
<input type="text" class="input" name="s" required="true" placeholder="...Search" dir="rtl">
</form>
在主题header.php文件中将dir修改回ltr,然后把placeholder的内容也修改为了"Search..."。
<form id="search" method="post" action="/" role="search">
<input type="text" class="input" name="s" required="true" placeholder="Search..." dir="ltr">
</form>
这么一改字序是正常了,但文字却靠左了。因为搜索按钮位于主题的右上方,文字靠右方便用户输入是个挺好的主意。搜索了一下输入框的文本属性,发现有个text-align属性,就用它更改文字位置了。
#search input{font-size:20px;width:100%;padding:0 2%;transition:all .3s ease-out;color:#5d5d5d;border:0;border-radius:0;outline-style:none;background:#faffbd;}
在主题style.css文件中找到上述搜索框的css语句,在尾部增加一行:text-align:right;